通过div循环，然后循环遍历其中的列表项。

Question

我有以下JS小提琴：https://jsfiddle.net/inkedraskal/eyan9quv/

我试图遍历divs，然后循环遍历那些divs中的列表-items。因此，我认为'for循环嵌套在for循环‘中。结果将在每个列表项中追加一个序列号。

最终结果如下所示：

<div id="all-music" class="clearfix" data-equalizer="">
    <div id="mOption-1" class="medium-3 columns music-projects__project">
        <ul id="fileList-1" class="album-songs">
            <li data-audio="" class="album-songs__song">
                <span class="album-songs__number">
                    1   **NUMBER GOES HERE**
                </span>
                <span class="album-songs__title">
                    Up All Night
                </span>
            </li>

            <li data-audio="">
                <span class="album-songs__number">
                    2   **NUMBER GOES HERE**
                </span>
                <span class="album-songs__title">
                    Are You Hurting the One You Love?
                </span>
            </li>
        </ul>
    </div>

    <div id="mOption-2" class="medium-3 columns music-projects__project">
        <ul id="fileList-2" class="album-songs">
            <li data-audio="" class="album-songs__song">
                <span class="album-songs__number">
                    1   **NUMBER GOES HERE**
                </span>
                <span class="album-songs__title">
                    Up All Night
                </span>
            </li>

            <li data-audio="" class="album-songs__song">
                <span class="album-songs__number">
                    2   **NUMBER GOES HERE**
                </span>
                <span class="album-songs__title">
                    Ghosts (Demo)
                </span>
            </li>

            <li data-audio="">
                <span class="album-songs__number">
                    3   **NUMBER GOES HERE**
                </span>
                <span class="album-songs__title">
                    Are You Hurting the One You Love?
                </span>
            </li>
        </ul>
    </div>
</div>

如有任何建议，将不胜感激。

js看起来像这样：

var SongCounter = (function ($) {
    function init() {
        var albumLength = $('.album-songs').length;

        for (var i = 0; i < albumLength; i++) {
            // $('.album-songs li').eq(i).find('.album-songs__number').append(i + ' _ ');
            var songLength = $(this).eq(i).find('li').length;

            for (var z = 1; z < songLength; z++) {
                $(this).eq(z).find('.album-songs__number').append(z + ' _ ');
            }
        }
    }
    return {
        init: init
    };
})(jQuery);

SongCounter.init();

Answer 1

jQuery的index() get的父元素索引，所以看起来您真正需要的是附加到span中的每个LI的索引。

$('.album-songs__number').append(function() {
    return $(this).closest('li').index() + 1;
});

FIDDLE

Answer 2

使用jQuery：

​

$('.album-songs > li').each(function() {
  var index = $('>li',$(this).parent()).index(this) + 1;
  $('.album-songs__number', this).text(index + " : ");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all-music" class="clearfix" data-equalizer="">

  <div id="mOption-1" class="medium-3 columns music-projects__project">

    <ul id="fileList-1" class="album-songs">
      <li data-audio="" class="album-songs__song">
        <span class="album-songs__number">
                   **NUMBER GOES HERE**
        </span>
        <span class="album-songs__title">
                    Up All Night                                
        </span>
      </li>

      <li data-audio="">
        <span class="album-songs__number">
                   **NUMBER GOES HERE**
        </span>
        <span class="album-songs__title">
                    Are You Hurting the One You Love?                               
        </span>
      </li>

    </ul>

  </div>

  <div id="mOption-2" class="medium-3 columns music-projects__project">

    <ul id="fileList-2" class="album-songs">
      <li data-audio="" class="album-songs__song">
        <span class="album-songs__number">
                   **NUMBER GOES HERE**
        </span>
        <span class="album-songs__title">
                    Up All Night                                
        </span>
      </li>

      <li data-audio="" class="album-songs__song">
        <span class="album-songs__number">
                   **NUMBER GOES HERE**
        </span>
        <span class="album-songs__title">
                    Ghosts (Demo)                               
        </span>
      </li>

      <li data-audio="">
        <span class="album-songs__number">
                   **NUMBER GOES HERE**
        </span>
        <span class="album-songs__title">
                    Are You Hurting the One You Love?                               
        </span>
      </li>

    </ul>

  </div>

</div>

​

使用CSS：

​

ul.album-songs{
  list-style-type:decimal;
  }

<div id="all-music" class="clearfix" data-equalizer="">

  <div id="mOption-1" class="medium-3 columns music-projects__project">

    <ul id="fileList-1" class="album-songs">
      <li data-audio="" class="album-songs__song">
        <span class="album-songs__number">
        </span>
        <span class="album-songs__title">
                    Up All Night                                
        </span>
      </li>

      <li data-audio="">
        <span class="album-songs__number">
        </span>
        <span class="album-songs__title">
                    Are You Hurting the One You Love?                               
        </span>
      </li>

    </ul>

  </div>

  <div id="mOption-2" class="medium-3 columns music-projects__project">

    <ul id="fileList-2" class="album-songs">
      <li data-audio="" class="album-songs__song">
        <span class="album-songs__number">
        </span>
        <span class="album-songs__title">
                    Up All Night                                
        </span>
      </li>

      <li data-audio="" class="album-songs__song">
        <span class="album-songs__number">
        </span>
        <span class="album-songs__title">
                    Ghosts (Demo)                               
        </span>
      </li>

      <li data-audio="">
        <span class="album-songs__number">
        </span>
        <span class="album-songs__title">
                    Are You Hurting the One You Love?                               
        </span>
      </li>

    </ul>

  </div>

</div>

​

Answer 3

在第一个循环中没有“$(This)”选择器的上下文：

var songLength = $(this).eq(i).find('li').length；

我有一把工作小提琴，你应该看看：

https://jsfiddle.net/ak5mkymm/1/

变量SongCounter =(函数($) {

function init() {
    // retrive all 'ALBUMS' for the dom
    // store them in a jQuery array
    // so that that we can use jwuery stuff directly on them

    var ALBUMS = $('.album-songs');

    ALBUMS.each(function(){
        // cache the current 'album' object
        var album = $(this); 

        // find all track/songs in inside current album
        var LI = $(album).find( 'li' ); 

        // establisj a counter before iteration
        var COUNTER = 1;


        LI.each(function(){
            // cache the current 'listed-item' object
            var listed_item = $(this);

            // find all the track nuymber placeholerd
            var SONGS = $(listed_item).find('.album-songs__number');


            SONGS.each(function(){
                // cache the current 'song' object
                var song = $(this);

                // Writethe counter out for current 'song'
                $(song).html('Track: '+ COUNTER +'.');

                // incement the counter
                COUNTER += 1;
            });
        });



    })


}




return {
    init: init
};

)(JQuery)；

SongCounter.init()；