如何才能动态地将3个html元素附加到.col-3 div中？

Question

我得到了我在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();
}

Answer 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