Reputation: 831
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
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
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