如何动态地将 3 个 html 元素附加到 .col-3 div？答案

【问题标题】：How can I append only 3 html elements to a .col-3 div dynamically?如何动态地将 3 个 html 元素附加到 .col-3 div？
【发布时间】：2021-08-19 01:45:48
【问题描述】：

我有我在js中做的addProducts函数，就是从一个产品的对象中获取细节。

function addProducts(product) {
let body = '';
body += "<div class='card' style='width:10rem;'";
body += "<img class='card-img-top' " + "src=" + product.img + " alt='card image'>";
body += "<div class='card-body'>";
body += "<h5 class='card-title'>" + product.name + "</h5>";
body += "<p class='card-text'>" + product.description + "</p>";
body += "<a href='#' class='btn btn-primary'>" + "معرفة المزيد" + "</a>";

return body;

}

但是，它带有一个 .card 容器，其中仅详细说明了一种产品。我怎么能像这个一样只添加 3 个产品，但是在 .col-3 div 中？

<div class="row">
                        <div class="col-sm">
//Product 1
//Product 2
//Product 3
                        </div>
                        <div class="col-sm">
//Product 1
//Product 2
//Product 3
                        </div>
                        <div class="col-sm">
//Product 1
//Product 2
//Product 3
                        </div>
            </div>

我添加产品以显示在我的容器中，ID 为#products-list，并带有一个在“nodeSelect”事件上触发的 for 循环

let $productsList = $('#products-list');

onNodeSelected: function(event, data) {
    var products = '';


    for (let i = 0; i < data.products.length; i++) {
        products += addProducts(data.products[i]);
    }


    $productsList.html(products);
    $productsList.show();
}

【问题讨论】：

请提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example 最好还包括product 对象的示例。
我应该问一个更详细的新问题吗？
@EsamOlwan 你可以更新/编辑这个。
单击更新/编辑按钮后，您可以将 HTML/CSS 和/或 JS 放在将解析代码的片段中，这允许您提供当前代码的结果问题。添加代码片段按钮将如下所示：<>。此外，它为社区提供了一个集中的代码片段，可以直接复制到他们的答案中，以便更轻松地调试您的问题，并可能帮助您获得更快、更有利的问题答案。

标签： javascript html jquery css twitter-bootstrap

【解决方案1】：

考虑以下示例。

function addProducts(product) {
  // Create Card
  var card = $("<div>", {
    class: "card"
  }).css({
    width: "10rem"
  });
  $("<img>", {
    class: "card-img-top",
    src: product.img,
    alt: "Card Image"
  }).appendTo(card);
  var body = $("<div>", {
    class: "card-body"
  }).appendTo(card);
  $("<h5>", {
    class: "card-title"
  }).html(product.name).appendTo(body);
  $("<p>", {
    class: "card-text"
  }).html(product.description).appendTo(body);
  $("<a>", {
    href: "#",
    class: "btn btn-primary"
  }).html("معرفة المزيد").appendTo(body);
  // Return jQuery Object of populated Card
  return card;
}
// Define List as jQuery Object
var $productsList = $('#products-list');

// Event Action
onNodeSelected: function(event, data) {
  var products;
  // Clear current Product List
  $productsList.html("");
  // Iterate Object Data
  $.each(data.products, function(i, el)) {
    // i for the Index number and el for the object elements
    if (i % 3 == 0) {
      // use Modulus operator to wrap 3 items
      $("<div>", {
        class: "col-sm"
      }).appendTo($productList);
    }
    $(".col-sm:last", $productList).append(addProduct(el));
  }
  $productsList.show();
}

没有合适的例子，我无法测试代码。您必须自己进行测试。

更多关于模运算符：https://www.w3schools.com/js/js_arithmetic.asp

【讨论】：