Question

我有这种类型的代码：

<ul class="paymentLogo">
  <li class="visa"></li>
  <li class="masterCard"></li>
  <li class="cash"></li>
  <li class="interac"></li>
</ul>

如何在jQuery中获得：

var payments = "visa, masterCard, cash, interac";

Answer 1

如果你只有一个.paymentLogo元素，那么大约有十几种方法可以实现这一点。这是其中之一：

var payments = $(".paymentLogo > li")
                  .map(function() { return this.className; })
                  .get()
                  .join(", ");

Live Example

或者如果你想要更多jQuery-ish：

var payments = $(".paymentLogo > li")
                  .map(function() { return $(this).attr("class"); })
                  .get()
                  .join(", ");

您可以在the jQuery documentation中找到$()，map()和get()个功能。基本上，$()找到我们想要查看的li元素，map运行生成的jQuery集，超过我们提供的函数，以创建一个包含我们返回的新jQuery集。在该函数中，this是li元素（原始的，不是jQuery对象），因此我们可以从this.className获取其类的列表（如果有多个，它们是'将空间分隔）。 .get()为我们提供了一个jQuery集的数组。

然后，.join()调用是一个JavaScript数组函数，它从数组中获取各个值，必要时将它们转换为字符串，并使用您提供的分隔符将它们连接成一个字符串。

Answer 2

尝试一下这个：

$(pageDetails).find('ul.paymentLogo li').each(function(a) { 
       alert($(this).attr('class')); 
});

Answer 3

另一种方式：

var result = '';
$('.paymentLogo li').each(function(){
    var classname = $(this).attr('class');
    result = result+classname+',';
});
alert(result);

Fiddle

获取变量中的类名

3 个答案: