循環遍歷div，然后循環遍歷其中的列表項

Question

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

我正在嘗試遍歷div ，然后我試圖循環遍歷這些div中的列表項 。 所以我在想一個'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()獲取父元素中的元素索引，所以你真正需要的就是附加到span的每個LI的索引

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

小提琴

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/

var SongCounter =（function（$）{

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（）;