Question

我正在使用AJAX将数据附加到div元素。没有显示div类 item 样式，因为div类仅在成功函数起作用时出现。基本上，div类取决于成功函数。

<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类项目，名称，价格。在此代码中，数据仅附加在同一div中。

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

我该怎么做？

Answer 1

具有父容器

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

您可以使用append在附加容器中创建新的“ item”元素

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

P.S .：您可以检出here。

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

为js中的每个数据附加div

3 个答案: