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();
}

问题 它只在最后一个 JSON 值<li>的底部附加一个，<ul>但我没有设法附加来自 JSON 的 10 个结果。console.log 总是输出相同的结果（里面的最后一个 JSON 结果作为卖价和租价）

任何有关我的错误的帮助将不胜感激。谢谢你。

4

1 回答 1

2

您需要为要插入的每个项目克隆一次模板，而不仅仅是在循环开始之前克隆一次。

尝试这样的事情：

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. 更新租金和售价（覆盖您之前设置的任何价格）

  2. 将其插入到列表的末尾。根据insertBefore()文档，如果您要插入的项目已经在 DOM 中，它将被移动到新位置，而不是克隆 - 所以项目被反复移动到最后（它已经在哪里）

于 2013-07-01T23:35:52.017 回答