克隆元素並追加到結尾

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

        });