将类分配给动态创建的 div答案

【问题标题】：Assigning classes to dynamically created divs将类分配给动态创建的 div
【发布时间】：2019-04-23 15:47:05
【问题描述】：

我有一些代码可以根据后端的元素数量创建一定数量的 div。我正在尝试为每个 div 动态创建新类。

现在我有：

<div class="cat-box">Title</div>
<div class="cat-box">Title</div>
// these divs are created with JavaScript

我希望他们成为：

<div class="cat-box cat-num-0">Title</div>
<div class="cat-box cat-num-1">Title</div>

我在 SO 上找到了一些我在其中实现的代码，但我认为动态创建原始 div 而不是硬编码到我的 HTML 中会很复杂。

对此有什么想法吗？

JS sn-p:

loadCategories(){
        let categs = _categories;

        let htmlElems = "";
            for (var i = 0; i < categs.length; i++) {
                htmlElems += "<div class='cat-box'>" + categs[0].Title + "</div>";
                $(".cat-box").each(function(i) {
                    $(this).addClass("cat-num-" + (i + 1));
                });
            }

        let container = document.querySelector("div.top-training");
        container.innerHTML = htmlElems;
        console.log(container);
    }

【问题讨论】：

标签： javascript jquery function for-loop

【解决方案1】：

只需切换：

htmlElems += "<div class='cat-box'>" + categs[0].Title + "</div>";`

到：

// or: cat-num-" + (i + 1) + "
htmlElems += "<div class='cat-box cat-num-" + i + "'>" + categs[0].Title + "</div>";

然后删除$(".cat-box").each(...) 循环。

【讨论】：

简单明了。谢谢！里面有.each 感觉很奇怪。

【解决方案2】：

DOM 的核心功能之一是您可以以编程方式创建节点，而不是连接 HTML 字符串。

let categories = [{title: 'Foo'}, {title: 'Bar'}, {title: 'Baz'}];
let frag = document.createDocumentFragment();

categories.forEach(function(cat, i){
  let div = document.createElement('div');
  div.innerHTML = cat['title'];
  div.className = "cat-box cat-num-" + (i + 1);
  frag.appendChild(div);
});

document.querySelector('div.top-training').appendChild(frag);

&lt;div class="top-training"&gt;&lt;/div&gt;

【讨论】：