（テキスト）コンテンツが別のリストのリストアイテムID属性に対応するリストアイテムを生成するにはどうすればよいですか？

Question

私はハードコードされたリストを持っています。リストはそれぞれIDを持ちます。

すなわち、ハードコードされたリスト：私はハードコーディングされたリストの各項目のID属性の値をjQueryの別のリストのリスト項目を生成したい、とそれらのテキスト内容として設定

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

のjQuery -generatedリスト：私はjQのギャラリーアイテムの数を取得している

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

...

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

...ここに問題があります：jQueryがnavリスト（下記）を生成する際にリスト項目の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); 
}); 

結果に関して私blindspotと同じであるNAVのリストを生成しているリストが、すべてのリストを生成しますアイテムのコンテンツは「スライドの3番目のアイテム」と同じです。

事前に感謝します。ここで

SVS

Answer 1

は​​です。コード：あなたのコードは、基本は右だった

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

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

、あなただけの各リスト項目に対して実行されますeach機能への追加を移動する必要があります。アイテムは$(this)でアクセスできます。

Answer 2

私がお勧めしたい：

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 3

私はループ内に追加しませんが、文字列を作成して終了時に追加します。それははるかに速く、ギャラリーの各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 

デモ：

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 ： IDはHTML4で有効なW3Cではありません。それで、なぜ要素にIDがないときにインデックスを代わりに使うかを選択する理由