Question

我从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>的底部附加一个<ul>和最后一个JSON值，但我没有设法附加来自JSON的10个结果。 console.log始终输出相同的内容（最后的JSON结果作为卖出和租金价格）

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

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

通过仅克隆一次，您的原始代码将获取单个克隆项目，并重复执行以下操作：

更新租金和卖价（覆盖您之前设定的任何价格）
将其插入列表末尾。根据{{3}}文档，如果您要插入的项目已经在DOM中，它将移动到新位置，而不是克隆 - 因此项目被重复移动到结束（它已经存在）

更新<ul>并使用第一个<li>作为模板与克隆功能</li> </ul>

1 个答案: