Question

这是我的代码

<div class="EquipmentContent row">
      <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 subSection" style="float:right;background:#dff0ff;">         
        <section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
          <button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
        </section>
      </div>
    </div>

这里是动态加载div数据

var content= response.data.filters;
$.each(content,function(i,value){ 
    $('.subSection').html('<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2"><label class="equipmentHeaderlable">Name</label><label class="equipmentHeaderValues">'+value.name+'</label></section>').appendTo('.EquipmentContent');
});

它正确循环但只显示第一个对象。（我在数组中有6个名字，但它只显示第一个名字。）为什么呢？我尝试过添加滚动和高度。

还有一件事我怎么能动态地附加这个部分？

<section class="col-xs-12 col-sm-1 cl-md-1 col-lg-1">
<button type="button" style="display: inline-block;float:right;" class="btn btn-danger" onclick="hideEquipmentDetails()"><i class="fa fa-times"></i></button>
    </section>

Answer 1

问题是因为您在循环中使用html()。 html()清除所有现有内容并应用您在其位置提供的任何内容。这就是为什么只有循环中的最后一项才可见。

要解决此问题，请改用append()。

var content= response.data.filters;
$.each(content,function(i,value){ 
  $('.subSection').append('<section class="col-xs-12 col-sm-2 cl-md-2 col-lg-2"><label class="equipmentHeaderlable">Name</label><label class="equipmentHeaderValues">' + value.name + '</label></section>').appendTo('.EquipmentContent');
});

您可以使用相同的方法append()将第二个示例中的内容添加到DOM中。

如何动态地将按钮附加到div

1 个答案: