Question

我有一个看起来像这样的HTML模板：

<div id="amznplist">
    <div id="amznpitem">
        <span>
            <img src="%%Produktbild%%" alt="%%Produkttitel%%"><div id="amzntitle">%%Produkttitel%%</div><div id="amzprice">%%Produktpreis%%</div>
        </span>
    </div>
</div>

我试图归档的是加载整个html，复制#amznpitem项，遍历我的响应（数据），并使用数据填充每个li元素，并将其添加到末尾。发生的是，仅一个元素被添加到#amznplist中。这是我当前的代码。

            var li = html.find('#amznpitem').clone();
            html.find('#amznpitem').remove();
            var ul = html.find('#amznplist');

            $.each(data, function (index, values) {
                li.find('#amzntitle').text(values['title'][0]);
                li.find('a').attr('href', values['url'][0]);
                li.find('img').attr('src', values['img'][0]);
                li.find('img').attr('alt', values['title'][0]);
                li.find('#amzprice').text(values['lowest_price'][0]);
                $(ul).append(li);

            });
            $('#result').html(html);

Answer 1

您没有遍历循环中的响应数据，而是始终访问第一个元素-values...[0]。使用each函数中可用的索引来传递当前迭代中的值

    $.each(data, function (index, values) {
            li.find('#amzntitle').text(values['title'][index]);
            li.find('a').attr('href', values['url'][index]);
            li.find('img').attr('src', values['img'][index]);
            li.find('img').attr('alt', values['title'][index]);
            li.find('#amzprice').text(values['lowest_price'][index]);
            $(ul).append(li);

        });

克隆元素并追加到结尾

1 个答案: