Question

I have a hard-coded list, each list item of which has an ID. I want to have jQuery generate list items in another list, and set as their text content the ID attribute values of each of the hard-coded list’s items:

i.e. hard-coded list:

<ul class="gallery"> 
    <li id="1"></li>
    <li id="2"></li>
    <li id="3"></li>
</ul> 

jQuery-generated list:

<ul class="galleryNav"> 
    <li>Slide 1</li>
    <li>Slide 2</li>
    <li>Slide 3</li>
</ul> 

I have jQ getting the number of gallery items …

var ListItemCount = $('ul.gallery').children().size('li');

… here’s the trouble: how do I get jQuery to get each of the list items’ IDs as it generates the nav list (below) ?

var ListItemIndex = $('ul.pofo li').attr('id');
var listItem = '<li>Slide #' + ListItemIndex + ' of ' + $('ul.gallery li').length + ' list items!</li>';

this is generating the nav list however the content in each is the same because of my blindspot with regard to var ListItemIndex

$("ul.gallery li").each(function (i) {
    i = i+1;
    $('ul.galleryNav').append(listItem);
});

The results of the above code generates the list but all the list items’ content is the same, ‘Slide #1 of 3 items’.

Many thanks in advance!

svs

Answer 1

Here is the jsFiddle. The code:

var listItemCount = $('.gallery').children().size('li');

$('.gallery li').each(function() {
    $('.galleryNav').append(
        '<li>Slide #' + $(this).attr('id') + ' of ' 
             + listItemCount + ' list items!</li>');
});

Your code had the basics right, you just need to move the appending to the each function that will execute for each list item. The item can then be accessed with $(this).