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() 您可以使用提供的两个参数：

<form id ='articleForm'> <input id="textInput" type="textarea"></input> </form> <button onClick="addInput()">add input</button>
item。

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

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

您还会注意到使用 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;
}

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

1 个答案: