как создать элементы списка, чье (текстовое) содержимое соответствует атрибуту идентификатора элемента списка другого списка?

Question

У меня есть жестко закодированный список, каждый элемент списка которого имеет идентификатор.Я хочу, чтобы jQuery генерировал элементы списка в другом списке и устанавливал в качестве их текстового содержимого значения атрибута ID для каждого из элементов жестко-закодированного списка:

, т. Е. Жестко-закодированный список:

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

Список, сгенерированный jQuery:

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

У меня есть jQ для получения количества элементов галереи ...

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

... вот проблема: как мне получить jQueryполучить каждый из идентификаторов элементов списка при генерации списка навигации (ниже)?

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

это генерирует список навигации, однако содержимое каждого из них одинаково из-за моей слепой точки в отношении varListItemIndex

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

В результате выполнения приведенного выше кода создается список, но содержимое всех элементов списка одинаковое: «Слайд № 1 из 3 элементов».

Заранее большое спасибо!

svs

Answer 1

Я бы посоветовал:

var newUl = document.createElement('ul'); // It's marginally faster to create elements without jQuery.
newUl.id = 'galleryNav'; // setting the id of the element.
var count = $('.gallery li').length; // retrieving the number of list items
$('body').append(newUl); // appending the created <ul> to the body

$('.gallery li').each(
    function(i){ // iterating through each of the li eleents of the .gallery list
        var li = document.createElement('li'); // creating a new list-element
        // using the i variable returned by the each() function, adding 1 to counter JavaScript's zero-based numbering
        // and appending that created element to the galleryNav
        $(li).text('Slide ' + (i+1) + ' of ' + count).appendTo('#galleryNav');
    }​​​​​​​​​​​​​​​​​​​​​​​​​​​);​

JS Fiddle demo .

Ссылки:

• append().
• appendTo().
• document.createElement().
• each().

Answer 2

я бы не добавил его в цикл, а построил бы строку и добавил ее, когда она будет завершена.это гораздо быстрее, чем добавить его для каждого li в галерее.

var newList = "<ul class='galleryNav'>"; //starting the list

$(".gallery li").each(function(i){ //looping your gallery elements
    newList += "<li>Slide" + this.id || i + "</li>"; //extending the list
});

$("body").append( newList += "</ul>" );  //appending the list to the body or whatever 

demo:

http://jsfiddle.net/meo/yKgSf/​

или причудливая версия (поскольку создается длинная строка с помощью JSможет быть медленным)

var newList = []; // creating a empty array

$(".gallery li").each(function(i){ //looping your gallery list
    newList.push("<li>Slide" + this.id || i + "</li>"); //extending the array
});

$("body").append( "<ul class='galleryNav'>" + newList.join("") + "</ul>" ); //joining the array and append it to the body

демо: http://jsfiddle.net/meo/yKgSf/2/

PS: Наличие только номера в качестве идентификатора недопустимо в W3C в HTML4.Вот почему я предпочитаю использовать индекс альтернативно, когда у элемента нет идентификатора

Answer 3

Вот это jsFiddle . Код:

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

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

Ваш код правильно понял основы, вам просто нужно переместить добавление к функции each, которая будет выполняться для каждого элемента списка. Затем к предмету можно получить доступ с помощью $(this).