为js中的每个数据附加div

Question

我正在使用 AJAX 将数据附加到 div 元素。 div类的item样式显示是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" 中添加数据并附加每个数据。就像添加第一个数据时，将显示 item 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

您可以使用它来附加新的项目 div。您需要添加项目容器，即 id 为 all_items

的 div

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

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

Answer 3

因此，这里非常简单的答案是您的内嵌样式。如果你看代码，你已经写了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 );

---

P.S.：您可以查看here。