javascript - 将类分配给动态创建的 div

Question

我有一些代码可以根据后端的元素数量创建一定数量的 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 片段：

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);
    }

标签： javascriptjqueryfunctionfor-loop

Answer 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(...)循环。