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

时间:2016-03-09 22:26:36

标签: javascript jquery

我需要为每个<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。这里出了什么问题?

3 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

你可以这样做:

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

});

答案 2 :(得分:1)

此处结帐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++;
});