javascript - 遍历 div，然后遍历其中的列表项

Question

我有以下 JS fiddle :https://jsfiddle.net/inkedraskal/eyan9quv/

我尝试遍历 div，然后尝试遍历那些 div 内的 list-items。所以我在想一个“for 循环嵌套在for 循环中”。结果将在每个 list-item

内附加一个序列号

最终结果看起来像这样:

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

FIDDLE