0

html +=forループでHTMLをDOMに書き込むために使用しています。

ループ内の現在のアイテムの ID によっては、新しいアイテムを書きたくない場合がありますが、代わりに、今書いたアイテムのセクションを追加します。

これは私がしようとしているものですが、必要に応じて追加しません。この方法でできますか、それとももっと良い方法がありますか？

var html = '';
var i=0, length=data.length, image;

var lastID = '';

for(; i<length; i++) {

image = data[i];

    if(image.itemID!=lastID){   

        html += '<li>';
        html += '<div id="holder'+image.itemID+'">';
        html += '<div class="row">'+image.comment+'</div>';
        html += '</div>';
        html += '</li>';

    } else {

       $('#holder'+image.itemID).append('<div class="row">'+image.comment+'</div>');

    }

var lastID = image.itemID;

}

$('#display').append(html);
4

3 に答える 3

1

前に作成したコードがまだ DOM にないelseため、このセクションのコードは機能しません。divまた、DOM に含まれていない限り、jQuery などを使用して DOM モデルにクエリを実行しても、それを見つけることはできません。

パフォーマンスに問題がない限り、liすべてを一度に行うのではなく、要素が作成されたらすぐに DOM に挿入できます。このようにして、以前に作成された要素を見つけて、それらにコンテンツを追加できます。

var i=0, length=data.length, image;

var lastID = '';

for(; i<length; i++) {

    image = data[i];

    if(image.itemID!=lastID){   

        var html = '<li>';
        html += '<div id="holder'+image.itemID+'">';
        html += '<div class="row">'+image.comment+'</div>';
        html += '</div>';
        html += '</li>';

        $('#display').append(html);

    } else {

       $('#holder'+image.itemID).append('<div class="row">'+image.comment+'</div>');

    }

    var lastWish = image.wishlist_id;
}

更新します。実際には、DOM に挿入される前に、新しく作成された html を照会したり、操作したりすることもできます。jQuery は、次のようなシナリオを$(html).find('selector')十分に処理します。

var html = ''
var i=0, length=data.length, image;

var lastID = '';

for(; i<length; i++) {

    image = data[i];

    if(image.itemID!=lastID){   

        html += '<li>';
        html += '<div id="holder'+image.itemID+'">';
        html += '<div class="row">'+image.comment+'</div>';
        html += '</div>';
        html += '</li>';

    } else {

       $(html).find('#holder'+image.itemID).append('<div class="row">'+image.comment+'</div>');

    }

    var lastWish = image.wishlist_id;
}

$('#display').append(html);
于 2013-03-19T12:45:42.930 に答える
0

Append は引数として jQuery オブジェクトを取ります。したがって、適切な構文は次のようになります。

$('#display').append($(html));
于 2013-03-19T12:45:03.647 に答える
0

新しく作成された要素を管理するために、DOM の外部で一時的な要素を使用してそれを行う方法の例を次に示します。

for(var i       = 0,
        length  = data.length,
        $el     = $('<ul>'),
        lastId, image; i < length; i++) {

    image = data[i];

    if(image.itemID !== lastId) {
        $el.append('<li><div id="holder' + image.itemID +
            '"><div class="row">' + image.comment + '</div></div></li>');
    } else {
        $el.find('#holder' + image.itemID).append('<div class="row">' + image.comment + '</div>');
    }

    lastId = image.itemID; // is that right?! cause you need to set lastId somewhere..
}

$('#display').append($el.children());

'#holder' + image.itemID問題はおそらく、追加する前に DOM から要素 ( ) を取得しようとしたためです。

于 2013-03-19T12:45:58.623 に答える