为js中的每个数据附加div

问题描述 投票:1回答:3

我正在使用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);}

我怎样才能做到这一点?

javascript html ajax
3个回答
1
投票

拥有父容器

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

0
投票

你可以使用它来附加新的div项。你需要添加项目容器,它是id为all_items的div

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

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

0
投票

所以,这里非常简单的答案就是你的在线造型。如果你查看代码,你已经写了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

© www.soinside.com 2019 - 2024. All rights reserved.