Question

我需要为每个<a>提供不同的类。我只能用js / jquery来做。

<ul class="ulClass">
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>

我试图给他们提供类（className1，className2，className3）：

jQuery(document).ready(function(){
    var classNumber = 1;
    var className = "className" + classNumber;
    jQuery(".ulClass:nth-child(1)").addClass(className + classNumber++);
    jQuery(".ulClass:nth-child(2)").addClass(className + classNumber++);
    jQuery(".ulClass:nth-child(3)").addClass(className + classNumber++);
    jQuery(".ulClass:nth-child(4)").addClass(className + classNumber++);
});

我的代码只为ul元素提供了类名...此外它是className11。这里出了什么问题？

Answer 1

您可以使用.each（）jQuery方法迭代链接 See the documentation
这样，您就可以使用循环的当前迭代索引作为类名。

$(".ulClass a").each(function(index){
  $(this).addClass("className" + index);
});

Answer 2

你可以这样做：

  var classNumber = 1;
  $(".ulClass a").each(function(){
    var className = "className" + classNumber;
    $(this).addClass(className);
    classNumber++;

});

Answer 3

此处结帐Jsfiddle。

为无序列表中的<a>元素设置唯一的类名。您可以使用$(".ulClass a").each迭代每个“a”，然后在当前上下文addClass(className)上使用this。因为你希望锚标签有一个唯一的类名，所以我使用的是一个classNum变量，它在每次迭代后递增1。

var classNum = 1;
$(".ulClass a").each(function(){
    var className = "className" + classNum;
    $(this).addClass(className);
    classNum++;
});

使用jquery为元素添加不同的类

3 个答案: