Javascript - 在 for 循环中附加数据答案

【问题标题】：Javascript - Appending data on a for loopJavascript - 在 for 循环中附加数据
【发布时间】：2020-08-27 11:25:04
【问题描述】：

我目前正在逐行添加我的数据，如下所示：

 for (let i = 0; i < topArr.length; i++) {
        $('#oneTitle').html(topArr[0].sector)
        $('#twoTitle').html(topArr[1].sector)
        $('#threeTitle').html(topArr[2].sector)
    }

我试图在 for 循环中得到相同的结果。我目前正在使用 3 个不同的 id，因为在此列表中，它们的标题用 css 编号。

例如

网上商店
零售店
电子商务

我正在尝试遍历我的数组并附加到这 3 个 id，就像上面的代码一样。

有没有一种方法可以用一行代码循环递增我的数组，而不必确定我的目标是哪个索引？

我遇到了 JavaScript 逻辑问题，但我相信它与此类似：

for (let i = 0; i < topArr.length; i++) {
            $('#oneTitle').html(topArr[i].sector)
        }

只有一行被返回，因为我试图返回我上面硬编码的 3。

这里是html：

  <ul class="top-collection">
  <li class="top-collection-item"><div class="col-md-6 col-xs-12"><span class="data-circle">1</span><h4 class="top-table-text" id="oneTitle"></h4></div></li>
  <li class="top-collection-item"><div class="col-md-6 col-xs-12"><span class="data-circle">2</span><h4 class="top-table-text" id="twoTitle"></h4></div></li>
  <li class="top-collection-item"><div class="col-md-6 col-xs-12"><span class="data-circle">3</span><h4 class="top-table-text" id="threeTitle"></h4></div></li>
   </ul>

【问题讨论】：

标签： javascript arrays filter

【解决方案1】：

我可以看到您正在使用 jQuery，您可以使用 each() 方法，您可以在 $('ul.top-collection li') 上使用该方法。他们的网页上有一个很好的例子： https://api.jquery.com/each/

【讨论】：

【解决方案2】：

使用.eq() 方法按索引选择元素。

$lis = $(".top-collection h4");
for (var i = 0; i < topArr.length; i++) {
    lis.eq(i).html(topArr[i].sector);
}

或者你可以遍历元素：

lis.html(function(i) {
    return topArr[i].sector;
});

【讨论】：