我正在使用AJAX将数据附加到div元素。 div类项目样式显示为none,因为div类仅在成功函数工作时出现。基本上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类项目,将显示名称,价格。在此代码数据中只附加在同一个div中。
success:function(data) {
console.log(data);
$('.item').show();
$('.Name').append(data);}
我怎样才能做到这一点?
拥有父容器
<div class="items">
</div>
您可以使用append在此容器内使用append创建新的“item”元素
// create inner element
var newItem=$('<div class="item"></div>');
// inserting data
newItem.html(data);
// append to parent container
$('.items').append(newItem);
你可以使用它来附加新的div项。你需要添加项目容器,它是id为all_items的div
<div id="all_items"></div>
success:function(data) {
console.log(data);
$('#all_items').append('<div class="item">+data+</div>');
}
所以,这里非常简单的答案就是你的在线造型。如果你查看代码,你已经写了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。