Question

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

   <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 );
      });
    });

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

Answer 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()。

Answer 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;} ); });

Answer 3

您可以使用each提供的index;

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

..和data代替attr来设置数据属性。

当新元素开始时重新开始计数

3 个答案: