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

Question

我正在尝试创建一个数组并让它循环遍历该数组并将其附加到 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>

JS

$(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>

我没能正确地计算出循环。任何帮助将不胜感激。

Answer 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>

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

How do you loop an array and append it to a div?

arrays

jquery

loops

append