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

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

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

<div class="top-training"></div>

将类分配给动态创建的div

JS代码段：

2 个答案: