如何循环数组并将其附加到 div？答案

【问题标题】：How do you loop an array and append it to a div?如何循环数组并将其附加到 div？
【发布时间】：2021-05-06 02:53:25
【问题描述】：

我正在尝试创建一个数组并让它遍历数组并将其附加到一个 div 中。

HTML/PHP：

<ul id="menu" class="menu">
    <li id="menu-item-1">
        <a href="#">
        </a>
    </li>
    <li id="menu-item-2">
        <a href="#">
        </a>
    </li>
    <li id="menu-item-3">
        <a href="#">
        </a>
    </li>
</ul>

$(document).ready(function(){
    $('a').append("
        <div class='CLASS_NAME_HERE'>
            <span class='vertical-align-middle'></span>
            <img src='IMG_HERE'>
        </div>
        <div class='filter-label'>LABEL_HERE</div>");
});}

JS 数组

var arrayTest= [
    {className: "class-01", urlSrc: "www.url01.com", labelName: "01 Label Name"},
    {className: "class-02", urlSrc: "www.url02.com", labelName: "02 Label Name"},
    {className: "class-03", urlSrc: "www.url03.com", labelName: "03 Label Name"},
]

基本上，它会遍历数组并附加每个数组，如下所示：

<li id="menu-item-1">
    <a href="#">
        <div class='class-01'>
            <span class='vertical-align-middle'></span>
            <img src='www.url01.com'>
        </div>
        <div class='filter-label'>01 Label Name</div>");
    </a>
</li>

我无法正确解决循环。任何帮助将不胜感激。

【问题讨论】：

标签： jquery arrays loops append

【解决方案1】：

你必须循环数组。使用.forEach()，您可以使用提供的两个参数：

item
index。

在每次循环迭代中，使用item，您可以访问对象属性，如className、urlSrc 和labelName。

使用index，您可以使用.eq() 方法定位正确的a 元素。

您还会注意到使用templating literals 来插入要附加的字符串中的变量。

var arrayTest = [
  {
    className: "class-01",
    urlSrc: "http://via.placeholder.com/100x100?text=Image 1",
    labelName: "01 Label Name"
  },
  {
    className: "class-02",
    urlSrc: "http://via.placeholder.com/100x100?text=Image 2",
    labelName: "02 Label Name"
  },
  { className: "class-03",
   urlSrc: "http://via.placeholder.com/100x100?text=Image 3",
   labelName: "03 Label Name"
  }
];

$(document).ready(function () {
  arrayTest.forEach(function (item, index) {
    $("#menu a").eq(index).append(
`<div class="${item.className}">
  <span class='vertical-align-middle'></span>
  <img src="${item.urlSrc}">
</div>
<div class='filter-label'>${item.labelName}</div>`
    );
  });
});

a{
  text-decoration: none;
}

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

<ul id="menu" class="menu">
  <li id="menu-item-1">
    <a href="#">
    </a>
  </li>
  <li id="menu-item-2">
    <a href="#">
    </a>
  </li>
  <li id="menu-item-3">
    <a href="#">
    </a>
  </li>
</ul>

【讨论】：