jquery - 如何生成其(文本)内容对应于另一个列表的列表项 ID 属性的列表项？

Question

我有一个硬编码列表，其中每个列表项都有一个 ID。我想让 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 在生成导航列表(如下)时获取每个列表项的 ID？

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

这正在生成导航列表，但是由于我对 var ListItemIndex 的盲点，每个列表中的内容是相同的

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

上述代码的结果生成列表，但所有列表项的内容都是相同的，“Slide #1 of 3 items”。

非常感谢!

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