Question

我使用一个简单的函数将一个类添加到无序列表中的一组li标签中。

$('div ul li').each(function(e){
   $(this).addClass('c' + e);       
});

返回以下HTML

<div>
    <ul>
        <li class="c0"></li>
        <li class="c1"></li>
        <li class="c2"></li>
        <li class="c3"></li>
    </ul>
</div>  
<div>
    <ul>
        <li class="c4"></li>
        <li class="c5"></li>
        <li class="c6"></li>
        <li class="c7"></li>
    </ul>
</div>

它正在做它应该将索引添加到类名末尾的内容。我怎样才能使它重置为每个新的无序列表。所以它会返回这样的东西。

<div>
    <ul>
        <li class="c0"></li>
        <li class="c1"></li>
        <li class="c2"></li>
        <li class="c3"></li>
    </ul>
</div>  
<div>
    <ul>
        <li class="c0"></li>
        <li class="c1"></li>
        <li class="c2"></li>
        <li class="c3"></li>
    </ul>
</div>

以上是我上面粘贴的代码的JS小提琴，其中包含我目前拥有的工作版本：http://jsfiddle.net/kdGgK/1/

Answer 1

使用.index()，它会告诉您每个元素索引相对于其兄弟

$('div ul li').each(function(e){
   $(this).addClass('c' + $(this).index());        
});

http://jsfiddle.net/mowglisanu/kdGgK/3/

Answer 2

你可以嵌套每个（）函数。

$('div ul').each(function() {
   $(this).children('li').each(function(e){
      $(this).addClass('c' + e);        
   });
});

Answer 3

首先选择ul，然后在ul之后循环播放，并将课程应用到每个li中的ul。

$('div ul').each(function(e){
    $(this).find('li').each(function (e) {
        $(this).addClass('c' + e);        
    });
});

JS小提琴：http://jsfiddle.net/kdGgK/2/

Answer 4

为每个无序列表li

应用不同的类

 $('div ul').each(function(){
    $(this).children('li').each( function(e){
       $(this).addClass('c' + e);       
     });
  });

为每个无序列表li

应用一个类

 $('div ul').each(function(e){
    $(this).children('li').addClass('c' + e);       
  });

使用jQuery中的每个函数来应用一个类

4 个答案: