CODEWITHSUNDEEP
javascriptjqueryfor-loop
RMH
RMH

Reputation: 831

Loop through divs, then loop through the list items inside of them

I have the following JS fiddle: https://jsfiddle.net/inkedraskal/eyan9quv/

I'm trying to loop through divs, then I'm trying to loop through the list-items inside of those divs. So I'm thinking a 'for loop nested in a for loop'. The result would be appending a sequential number inside each list-item

end result would look something like this:

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

Any tips would be appreciated

the js looks like this:

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

Upvotes: 1

Views: 300

Answers (3)

user6019311
user6019311

Reputation:

You have no context for the '$(this)' selector inside your first loop:

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

I have a working fiddle you should take a look at:

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

Upvotes: 0

sabithpocker
sabithpocker

Reputation: 15576

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

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

Upvotes: 0

adeneo
adeneo

Reputation: 318372

jQuery's index() get's the elements index in the parent, so it seems like all you really need is the index of each LI appended to the span

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

FIDDLE

Upvotes: 3

Related Questions