Question

我有以下JS小提琴：onCreateDialog()

我试图遍历 divs ，然后我试图遍历那些 divs <中的 list-items / strong>即可。所以我想一个＆＃39; 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;
});

FIDDLE

Answer 2

使用jQuery：

＆＃13;

[^\d]

＆＃13;

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

＆＃13;

使用CSS：

＆＃13;

<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>

＆＃13;

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

＆＃13;

Answer 3

你没有＆＃39; $（this）＆＃39;第一个循环中的选择器：

＆＃34; var songLength = $（this）.eq（i）.find（＆＃39; li＆＃39;）。length; ＆＃34;

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

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

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

3 个答案: