jquery - 要素を追加追加要素

Question

ループがあり、このループでli要素を追加し、その後a要素を内部liに追加する必要がありますが、このコードを書くと、a要素がすべての要素に追加されliます。

var toolbarArray = new Array("Home", "About", "Contact");
var ceItem = $('#toolbar').append('<ul></ul>').find('ul');
var ceLiItem;
for (i=0; i<toolbarArray.length; i++) {
    ceLiItem = ceItem.append('<li></li>').find('li');
    ceLiItem.append('<a>'+toolbarArray[i]+'</a>');
}

これは結果です: http://jsfiddle.net/SKPxE/

Answer 1

次のように、追加したばかりのオブジェクト (および、おそらく他の多くのor要素)を参照する jQuery オブジェクトを取得するため.appendTo()に呼び出す必要がないように使用します。.find()<ul><li>

var toolbarArray = new Array("Home", "About", "Contact");
var ceItem = $('<ul></ul>').appendTo('#toolbar');
var ceLiItem;
for (i=0; i<toolbarArray.length; i++) {
    ceLiItem = $('<li></li>').appendTo(ceItem);
    ceLiItem.append('<a>'+toolbarArray[i]+'</a>');
}

Answer 2

コードの構造は少し再配置できます: http://jsfiddle.net/SKPxE/4/

$(document).ready(function() {
    var toolbarArray = new Array("Home", "About", "Contact"),
        toolbar = $('<ul></ul>').appendTo('#toolbar');

    $.each(toolbarArray, function(i,o) {
        var link = $('<a></a>').attr('href','').text(o),
            celItem = $('<li></li>').append(link);
        toolbar.append(celItem);
    });   
});​

1. スコープごとに 1 つだけ宣言varすると、少しすっきりします (jsLint)。

2. 配列を反復するために使用できます$.each()（あなたの方法も問題ありませんが、jQバージョンが役立つ場合があります

3. あなたのリンクはテキスト以上のものになる可能性が高いので、上記のコードはその準備をします (href属性に注意してください) 。

4. jquery で要素を作成する場合、それを取得する$('<li></li>')ために使用する必要はありません。既に存在します。.find()

5. 編集： Anthonyの投稿を参照してください.appendTo()

Answer 3

これの方が良い

$(document).ready(function() {
    var toolbarArray = new Array("Home", "About", "Contact");

    var ceList = $('<ul></ul>');
    $('#toolbar').append(ceList);

    $.each(toolbarArray, function(index, value) {
        ceList.append('<li><a>' + value + '</a></li>');
    });
});

Answer 4

これを試して：

var toolbarArray = new Array("Home", "About", "Contact");
var ceItem = $('#toolbar').append('<ul></ul>').find('ul');
var ceLiItems = '';
for (i=0; i<toolbarArray.length; i++) {
    var ceLiItems+= '<li><a>'+toolbarArray[i]+'</a></li>'
}
ceItem.append(ceLiItems);

このコードは、多くの無駄な DOM トラバーサルを節約するため、より効率的かつ高速です。