逐步增加数量与使用jQuery

Question

我无法得到行话相同的类名的所有元素右边，从而找出如何做到这一点。在我的网页我有类“Z-标题为”众多的span元素。我想一个附加的类从这个

<span class="z-title">Hello</span> 
<span class="z-title">Hello</span> 
<span class="z-title">Hello</span> 

添加这些元素，其中包括一个递增的数字，例如

这个

<span class="z-title tab1">Hello</span> 
<span class="z-title tab2">Hello</span> 
<span class="z-title tab3">Hello</span> 

感谢您的帮助！

Answer 1

jQuery的.addClass() function可以接受一个回调函数作为参数，在这种情况下该回调将在jQuery对象每个元素调用一次。回调接收当前元素的索引作为参数，并从回调返回的字符串值应的类的要添加到该元素的名称。

元素指数起始于零，但当然，你可以添加一个到每个索引得到你想要的类名称：

$(".z-title").addClass(function(i) { return "tab" + (i + 1) })

.tab1 { color: red; } 
 
.tab2 { color: blue; } 
 
.tab3 { color: green; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span class="z-title">Hello</span> 
 
<span class="z-title">Hello</span> 
 
<span class="z-title">Hello</span>

Answer 2

您可以使用jQuery每个功能循环通过类名“z-title”的所有元素并通过递增索引值向其添加类，代码如下：

$(".z-title").each(function(index){ 
    $(this).addClass('tab'+(index+1)); 
    })