代码之家 › 专栏 › 技术社区 › Trenton Tyler

循环数组中的对象以创建元素

javascript

Trenton Tyler · 技术社区 · 7 年前

const frameworks = [
  {
    name: "angular"
  },
  {
    name: "ember"
  },
  {
    name: "react"
  },
  {
    name: "vue"
  }
];

为了保持简单,我只需要一个对象数组(为了可读性而简化)。

我有一个函数来循环这个数组,现在它只是将框架的名称打印到控制台上。如果我想为循环中的每个项目创建这个HTML元素(只是一个引导卡),那么最好的方法是什么?

frameworks.forEach(fw => {
    console.log(fw);
  });

只是一个非常简单的forEach函数。

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

createElement()

3 回复 | 直到 7 年前

Mojimi 7 年前

对于纯javascript:

const frameworks = [
  {
    name: "angular"
  },
  {
    name: "ember"
  },
  {
    name: "react"
  },
  {
    name: "vue"
  }
];

frameworks.forEach( framework => {
  const card = `<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">${framework.name}</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>`
  const ele = document.createElement('div');
  ele.innerHTML = card;
  document.body.appendChild(ele.firstChild);
})

marzelin 7 年前

如果您不必添加任何事件侦听器,我建议 insertAdjacentHTML()

const frameworks = [
  {
    name: "angular"
  },
  {
    name: "ember"
  },
  {
    name: "react"
  },
  {
    name: "vue"
  }
];

frameworks.forEach( framework => 
  document.body.insertAdjacentHTML("beforeend", 
  `<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">${framework.name}</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>`))

Kosh 7 年前

我建议你使用 reduce 而不是 forEach .
将HTML准备为字符串,然后更新 innerHTML 这比一张接一张地增加卡片要快得多。

请参见下面的代码段:

const frameworks = [{
    name: "angular"
  },
  {
    name: "ember"
  },
  {
    name: "react"
  },
  {
    name: "vue"
  }
];

document.querySelector('.content')
  .innerHTML = frameworks.reduce((a, fw) => a +=
  `<div class="card" style="width: 18rem;">
  <img class="card-img-top" src=".../100px180/?text=Image cap" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">${fw.name}</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>`, ''
);

.content {
  display: flex;
  flex-flow: row wrap;
}

.card {
  margin: .5rem;
  padding: 1rem;
  background: #fec
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="content"></div>