首页 > 解决方案 > 在 JavaScript 中 for 循环时如何添加 HTML 类

问题描述

我试图在遍历数组时添加一个类,这是我当前的代码:

var users = [{
    name: "Jan",
    id: "1",
    number: "111-111-111"
  },
  {
    name: "Juan",
    id: "2",
    number: "222-222-222"
  },
  {
    name: "Margie",
    id: "3",
    number: "333-333-333"
  },
  {
    name: "Sara",
    id: "4",
    number: "444-444-444"
  },
  {
    name: "Tyrell",
    id: "5",
    number: "555-555-555"
  },
];

var div = "<div>";
for (var i = 0; i < users.length; i++) {
  div += "<p>" + users[i].name + "</p>";
  div += "<p>" + users[i].id + "</p>";
  div += "<p>" + users[i].number + "</p>";
}
div += "</div>";
document.getElementById("usersList").innerHTML = div;
<div class="contact-container">
  <div class="navbar">
    <ul>
      <li>
        <img src="https://img.icons8.com/ios-filled/50/000000/contact-card.png" />
      </li>
      <li>
        <a href="#">View</a>
      </li>
      <li>
        <a href="#">Add</a>
      </li>
      ...
    </ul>
  </div>
  <div class="users" id="usersList">

  </div>

有什么办法可以在循环时添加一个类?

标签: javascripthtmlcss

解决方案


为什么不在循环中放一个类呢?像这样

for (var i = 0; i < users.length; i++) {
  div += "<p class='myclass'>" + users[i].name + "</p>";
  div += "<p class='myclass'>" + users[i].id + "</p>";
  div += "<p class='myclass'>" + users[i].number + "</p>";
}


推荐阅读