1

結果リストを更新するために、Ajax から JSON 文字列を受け取ります。「もっと見る」の場合は、リストを追加します。新しい検索の場合は、前にリストをクリアします。ajax 呼び出しがトリガーされるとすぐに、読み込み<li>がリストの一番下に追加されます。以下の<li></li>露出は単純化されています。<span></span>それぞれの要素を個別に追加するのではなく、最初の要素<li></li>を次の結果のテンプレートとして使用します。

これは単純化されたHTMLコードです

<ul id="list">
<li>
   <span class="itemPriceSell">1234</span>
   <span class="itemPriceRent">56</span>
</li>
<li>
   <span class="itemPriceSell">9876</span>
   <span class="itemPriceRent">54</span>
</li>
</ul>

これはjQuery関数です

function refreshResults(data) {
    var cloned = $('ul#list li:first').clone();
    filtersChanged() ? $('ul#list li:not(:last)').remove() : null
    $.each(data, function(index, hbid) {
        cloned.find('.itemPriceSell').text(hbid.sellprice);
        cloned.find('.itemPriceRent').text(hbid.rentprice);
        cloned.insertBefore('ul#list li:last');
        console.log(cloned);

    });
    $('ul#list li:last').remove();
}

問題<li>最後の JSON 値の末尾に 1 つだけ追加さ<ul>れますが、JSON からの 10 個の結果を追加できませんでした。console.log は常に同じものを出力します (最後の JSON 結果は販売価格と賃貸価格として内部に出力されます)。

私のバグに関する助けをいただければ幸いです。ありがとうございました。

4

1 に答える 1

2

ループが開始する前に 1 回だけでなく、挿入するアイテムごとに 1 回テンプレートを複製する必要があります。

次のようなことを試してください：

function refreshResults(data) {
    filtersChanged() ? $('ul#list li:not(:last)').remove() : null
    var template = $('ul#list li:first');
    $.each(data, function(index, hbid) {
        var cloned = template.clone();
        cloned.find('.itemPriceSell').text(hbid.sellprice);
        cloned.find('.itemPriceRent').text(hbid.rentprice);
        cloned.insertBefore('ul#list li:last');
        console.log(cloned);
    });
    $('ul#list li:last').remove();
}

1 回だけクローンを作成することで、元のコードは単一のクローン項目を取得し、それに対して次のアクションを繰り返し実行していました。

  1. 賃貸料と販売価格の更新 (以前に設定した価格を上書きします)

  2. リストの最後に挿入します。ドキュメントによると、insertBefore()挿入するアイテムがすでにDOMにある場合、クローンではなく新しい場所に移動されるため、アイテムは繰り返し最後に移動されていました(すでにあった場所)

于 2013-07-01T23:35:52.017 に答える