Question

我有一个包含JavaScript生成的按钮的div。其原因是用户从左列选择项目，包含项目名称的按钮被添加到右侧（类似于购物车）。如果单击右侧的按钮，则会删除该按钮。

Div填充了一些按钮，如下所示：

＆＃13;

<div id="controllist2" style="position: fixed; padding-left: 10px;">
  <button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
  <button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
  <button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
  <button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
  <button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
  <button id="swsc11" type="button" onclick="removeControlButton(this.id);" class="btn btn-default btn-xs" style="background: url(../../Images/controls/swsc.png) no-repeat; background-size: 28px;">swsc 1</button>
</div>

＆＃13;

有没有办法迭代这个div，获取所有按钮html文本并将它们附加到标签上？

我环顾了几个小时，找不到一个好的起点。

Answer 1

要使用jQuery迭代某些内容，您可以使用.each()

你可以这样做：

var buttonArray = [];
$('#controllist2 > button').each(function(i){
    var name = $(this).text();
    buttonArray.push(name);
});
console.log(buttonArray);

这将启动一个新数组，遍历#controllist2 div并查看每个按钮。使用按钮文本创建一个值（您可以使用.attr('id')或.attr('class')或其他），然后将其推入该空数组。

然后，您可以使用按钮名称执行任何操作。

Answer 2

按钮名称？你的意思是按钮的html吗？

var label_text = '';
$('#controllist button').each(function(){
  label_text += $(this).html();
});

$('#controlllist').append('<label>'+label_text+'</label>');

列表中的按钮名称

2 个答案: