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

Posted 2023-05-08

【中文标题】如何动态地将 3 个 html 元素附加到 .col-3 div？

【英文标题】：How can I append only 3 html elements to a .col-3 div dynamically?

【发布时间】：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();

【问题讨论】：

请提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-example 最好还包括product 对象的示例。

我应该问一个更详细的新问题吗？

@EsamOlwan 你可以更新/编辑这个。

单击更新/编辑按钮后，您可以将 HTML/CSS 和/或 JS 放在将解析代码的片段中，这允许您提供当前代码的结果问题。添加代码片段按钮将如下所示：<>。此外，它为社区提供了一个集中的代码片段，可以直接复制到他们的答案中，以便更轻松地调试您的问题，并可能帮助您获得更快、更有利的问题答案。

【参考方案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