新元素开始时以计数重新开始答案

【问题标题】：Start over with count when new element start新元素开始时以计数重新开始
【发布时间】：2014-05-26 15:36:40
【问题描述】：

现在我想要的是一个计数器，它将在新图片类开始时重新开始。我正在寻找的结果是

   <ul class="pictures">
    <li data-slide-index='0'></li>
    <li data-slide-index='1'></li>
    <li data-slide-index='2'></li>
   </ul>

  <ul class="pictures">
    <li data-slide-index='0'></li>
    <li data-slide-index='1'></li>
    <li data-slide-index='2'></li>
    <li data-slide-index='3'></li>
    <li data-slide-index='4'></li>
   </ul>

   <ul class="pictures">
    <li data-slide-index='0'></li>
    <li data-slide-index='1'></li>
    <li data-slide-index='2'></li>
   </ul>

我尝试过这样的事情：

  $( ".pictures  > li" ).eq( 0 ).attr( "data-slide-index", "0" );
  $( ".pictures  > li" ).eq( 1 ).attr( "data-slide-index", "1" );
  $( ".pictures  > li" ).eq( 2 ).attr( "data-slide-index", "2" );
  $( ".pictures  > li" ).eq( 3 ).attr( "data-slide-index", "3" );
  $( ".pictures  > li" ).eq( 4 ).attr( "data-slide-index", "4" );
  $( ".pictures  > li" ).eq( 5 ).attr( "data-slide-index", "5" );

或

$( ".pictures" ).each(function() {
      var numberdataslide = 0;
        $( ".pictures li" ).each(function() {
          numberdataslide++;
          $( this ).attr( "data-slide-index", numberdataslide );
      });
    });

但我所做的一切，我都不会得到它。请帮忙！

【问题讨论】：

用$(this).find('li')替换$( ".pictures li" )

标签： jquery each counter

【解决方案1】：

我能想到的最简单的方法如下：

$('ul.pictures').each(function(){
    // i: the index of the current element among the collection returned
    // by the selector
    $(this).find('li').attr('data-slide-index', function(i){
        return i;
    });
});

JS Fiddle demo.

参考资料：

attr()。
each()。

【讨论】：

这是最干净的方法！！

【解决方案2】：

你可以使用jQuery .index():

$( ".pictures" ).each(function() {
    var $this = $(this),
    li = $this.find('li');

    li.each(function() {
        $(this).attr( "data-slide-index", li.index(this) );
    });
});

编辑：

即使是最简单的解决方案：

$( ".pictures" ).each(function() {
    $('li',this).attr( "data-slide-index", function(index){return index;} );
});

【讨论】：

【解决方案3】：

您可以使用each提供的index；

$(".pictures").each(function() {
    $(this).find("li").each(function(index) {
        $(this).data("slide-index", index);
    });
});

..和data 而不是attr 用于设置数据属性。

【讨论】：