如何将循环的每次迭代包装在单独的 div 容器中

Question

我正在尝试创建嵌套在数组中的对象列表。我能够将每个对象的属性附加到特定元素（即“标题”属性放置在 H1 元素中，等等）；但是，我希望每个对象及其所有属性都包装在每个对象的单独 DIV 元素中。到目前为止，所有对象都在一个 div 中。我在想也许一个 forEach 循环可能是必要的。我试过弄乱它，但似乎无法弄清楚这一点，尽管它看起来应该相当简单。

这是我的代码：

<div id="container"></div>

CSS

#container {
  margin:50px;
  padding: 50px;
  border: 1px solid black;
}

还有脚本：

var ads = [
    {
        title: "Title 1",
        description: "Lorum ipsum dolor",
        start_date: "2018-09-01",
        end_date: "2018-12-30",
        offer: "50% Off",
        num_of_products: 7
    },
    {
        title: "Title 2",
        description: "Lorum ipsom",
        start_date: "2018-08-01",
        end_date: "2018-11-30",
        offer: "Save $25",
        num_of_products: 10
    },
    {
        title: "Title 3",
        description: "Lorum ipsum dolor etc",
        start_date: "2018-09-01",
        end_date: "2018-10-30",
        offer: "35% Off",
        num_of_products: 8
    },

];


    const parent = document.getElementById("container");

  for( { title, description, start_date, end_date, offer, num_of_products } of ads) {

    const headline = document.createElement("h1");
    headline.textContent = title;
    const descrip = document.createElement("p");
    descrip.textContent = description;    
    const dates = document.createElement("sub");
    dates.textContent = "Offer valid " + start_date + " through " + end_date;    
    const discount = document.createElement("h2");
    discount.textContent = offer;    
    const products = document.createElement("h4");
    products.textContent = num_of_products + " items still available! " ;

   // append 
    parent.appendChild(headline);
    parent.appendChild(discount);
    parent.appendChild(descrip);
    parent.appendChild(products);
    parent.appendChild(dates);

 }

Answer 1

为此，我将使用一个名为 lit-html 的轻量级库，它非常适合这些类型的工作：

<div id="container"></div>

<script type="module">
  import { html, render } from 'https://unpkg.com/lit-html/lit-html.js?module'
  import { repeat } from 'https://unpkg.com/lit-html/directives/repeat.js?module'

  const offerTemplate = ({title, description, start_date, end_date, offer, num_of_products}) => html`
    <article>
      <h1>${title}</h1>
      <p>${description}</p>
      <sub>Offer valid ${start_date} through ${end_date}</sub>
      <h2>${offer}</h2>
      <h4>${num_of_products} items still available!</h4>
    </article>`

  const offersTemplate = offers => html`${repeat(offers, offerTemplate)}`

  render(offersTemplate(ads), document.getElementById('container'))
</script>

一种流行的模式是将迭代的叶子定义为它自己的自定义元素：

const offerTemplate = ad => html`
  <ads-offer
      title="${ad.title}"
      description="${ad.description}"
      start-date="${ad.start_date}"
      end-date="${ad.end_date}
      offer="${ad.offer}"
      num-products="${ad.num_of_products}"
  ></ads-offer>`

您可以在其中为 <ads-offer> 单独定义 DOM，并且独立于集合。

Answer 2

您可以为每个迭代创建包装器 div，如下所示并为其应用您的自定义类，然后将所有元素添加到此 div 中，然后将 div 添加到主容器

const parent = document.getElementById("container");

  for( { title, description, start_date, end_date, offer, num_of_products } of ads) {

    const wrapper =  document.createElement("div");
    wrapper.className = "container"; // you can add your class for it
    const headline = document.createElement("h1");
    headline.textContent = title;
    const descrip = document.createElement("p");
    descrip.textContent = description;    
    const dates = document.createElement("sub");
    dates.textContent = "Offer valid " + start_date + " through " + end_date;    
    const discount = document.createElement("h2");
    discount.textContent = offer;    
    const products = document.createElement("h4");
    products.textContent = num_of_products + " items still available! " ;

   // append 
    wrapper.appendChild(headline);
    wrapper.appendChild(discount);
    wrapper.appendChild(descrip);
    wrapper.appendChild(products);
    wrapper.appendChild(dates);
    parent.appendChild(wrapper);
 }