Question

我正在尝试遍历名为topics的数组。该数组具有人员名称。在我的循环中，我想获取每个名称并将其插入带有文字的按钮中。

当我在console.log中循环时，我可以看到数组中的每个名称都被打印出来。但是，当我尝试添加按钮的文本时，它只会在数组中添加姓氏。


var topics = ["Lebron James", "Kevin Durant", "Steph Curry", "James Harden", "Russel Westbrook", "Giannis Antetokounmpo", "Kawhi leonard", "Anthony Davis", "Paul George", "Kyrie Irving"];

for (var i = 0; i < topics.length; i++) {
    $(".gifnames").append("<button type=\"button\" class=\"btn btn-primary\">");
    $("button").text(topics[i]);
    console.log(topics[i]);
}

仅将Kyrie irvings名称添加到所有按钮，而不是将每个名称添加到创建的按钮。

Answer 1

$("button")匹配文档中的所有按钮。因此，在每次迭代中，它将使用当前项目重置所有先前按钮的文本。因此，在循环的最后迭代中，它将所有按钮的文本替换为数组的最后一项。

您必须定位特定按钮。您可以按照以下方式使用jQuery的.eq()：

var topics = ["Lebron James", "Kevin Durant", "Steph Curry", "James Harden", "Russel Westbrook", "Giannis Antetokounmpo", "Kawhi leonard", "Anthony Davis", "Paul George", "Kyrie Irving"];

for (var i = 0; i < topics.length; i++) {
  $(".gifnames").append("<button type=\"button\" class=\"btn btn-primary\">");
  $("button:eq(" + i + ")").text(topics[i]);
  console.log(topics[i]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gifnames"></div>

Answer 2

在loop的下一行中，您正在更改所有按钮的文本：

$("button").text(topics[i]);

因为使用的选择器将匹配文档上所有可用的buttons标签。因此，循环的最后一次迭代将数组的最后一个文本设置为所有按钮。一种解决方案是首先创建按钮，向其中添加相关文本，然后将其附加到容器中：

var topics = ["Lebron James", "Kevin Durant", "Steph Curry", "James Harden", "Russel Westbrook", "Giannis Antetokounmpo", "Kawhi leonard", "Anthony Davis", "Paul George", "Kyrie Irving"];

for (var i = 0; i < topics.length; i++)
{
    $('<button type="button" class="btn btn-primary">')
        .text(topics[i])
        .appendTo(".gifnames");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gifnames"></div>

Answer 3

如果更改为该怎么办？

for (var i = 0; i < topics.length; i++) {
    var nodes = "<button type='button' class='btn btn-primary'>"+topics[i]+"</button>";
    $(".gifnames").append(nodes);
    //$("button").text(topics[i]);
    console.log(topics[i]);
  }

Answer 4

您可以向每个按钮添加一个属性，然后通过该属性选择每个按钮

var topics = ["Lebron James", "Kevin Durant", "Steph Curry", "James Harden", "Russel Westbrook", "Giannis Antetokounmpo", "Kawhi leonard", "Anthony Davis", "Paul George", "Kyrie Irving"];

for (var i = 0; i < topics.length; i++) {
 $(".gifnames").append("<button type=\"button\" data-id=\""+topics[i]+"\" class=\"btn btn-primary\">");
  $("button[data-id=\""+topics[i]+"\"]").text(topics[i]);
  console.log(topics[i]);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gifnames"></div>

Answer 5

这是一种普通的JS方式。

var topics = ["Lebron James", "Kevin Durant", "Steph Curry", "James Harden", "Russel Westbrook", "Giannis Antetokounmpo", "Kawhi Leonard", "Anthony Davis", "Paul George", "Kyrie Irving"];
var gifnames = document.getElementsByClassName("gifnames")[0];

for (var i = 0; i < topics.length; i++) {
  var b = document.createElement("button");
  b.classList.add("btn", "btn-primary");
  b.name = topics[i];
  b.innerHTML = topics[i];
  gifnames.appendChild(b);
}

.btn-primary {
  background-color: aliceblue
}
.btn {
  display: block
}

<div class="gifnames">
</div>

如何遍历数组，以便将数组中的每个值写到按钮元素中？

5 个答案: