我想迭代一個回應并為每個物件創建一個文章部分
我有以下發出請求的代碼：
$.ajax({
type: "POST",
url: "http://0.0.0.0:5001/api/v1/places_search/",
data: JSON.stringify({}),
dataType: 'json',
contentType: "application/json",
success: function (list_of_places) {
for (let place of list_of_places) {
$(".places").append("<article></article>");
// title box
$(".places article").append(`<div >
<h2>${place['name']}</h2>
<div >${place['price_by_night']}</div>
</div>`);
}
}
});
這是要編輯的html片段：
<section class="places">
<!-- <h1>Places</h1> -->
</section>
這是片段結果的螢屏截圖：
如何在每篇文章中只獲取一個物件，而不是迭代中剩余的所有物件？
uj5u.com熱心網友回復：
問題是因為在您的for回圈中，$(".places article")正在選擇DOM 中與該選擇器匹配的所有元素，因此您重復地將新專案附加到每個元素。
要解決此問題，您可以append()將內容添加到article剛剛創建的內容中：
for (let place of list_of_places) {
const $article = $('<article />').appendTo('.places');
$article.append(`<div ><h2>${place.name}</h2><div >${place.price_by_night}</div></div>`);
}
或者，您可以使用map()而不是for回圈來創建一個 HTML 字串陣列，并將其作為一個整體附加到 DOM：
const html = list_of_places.map(place => `<article><div ><h2>${place.name}</h2><div >${place.price_by_night}</div></div></article>`);
$('.places').append(html);
uj5u.com熱心網友回復：
嘗試
$(".places article").eq(-1).append(`<div >...
基于對如何在 jQuery 中選擇單個元素的答案？一起在 jQuery 檔案中查找 eq 。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/526175.html