為js中的每個數據附加div

Question

我正在使用 AJAX 將數據附加到 div 元素。 div類項樣式顯示為none，因為div類只有在success函數起作用時才會出現。基本上就是div類依賴於success函數。

<div class="item" style="display: none;">
<div class="Name"></div> //here I want to show the success function data
<select class="price">
 <option>A</option>
 <option>B</option>
 <option>C</option></select>
</div>

div 僅在找到數據時顯示。 我想在div class="Name" 中添加數據並附加每個數據。 就像添加第一個數據時，項目div 將顯示，當添加第二個數據時，將顯示第二個數據。 對於每個數據 div 類item ， Name ， price將出現。 在此代碼中，數據僅附加在同一個 div 中。

success:function(data) {
console.log(data);
$('.item').show();
$('.Name').append(data);}

我怎樣才能做到這一點？

Answer 1

有一個父容器

<div class="items">
</div>

您可以使用 append在此容器內使用 append 創建新的“項目”元素

// create inner element
var newItem=$('<div class="item"></div>');
// inserting data
newItem.html(data);
// append to parent container
 $('.items').append(newItem);

Answer 2

因此，這里非常簡單的答案是您的內嵌樣式。 如果你看代碼，你寫的是display: none; . 這告訴渲染引擎將它從當前對象模型中隱藏起來。

但是，當success函數運行時，它會執行.show()禁用display: none; .

為了解決這個問題，

<div class="items" style="display: none;"></div>

然后您可以將其存儲為文字並使用映射動態添加內容，如下所示：

$( '.items' ).show();
const dataHtml = '<div class="item">' + data + '</div>';
$( '.items' ).append( dataHtml );

---

PS：你可以在這里查看。

Answer 3

您可以使用它來附加項目的新 div。 您需要添加項目容器，它是 ID 為all_items的 div

<div id="all_items"></div>

success:function(data) {
console.log(data);
$('#all_items').append('<div class="item">+data+</div>');
}