Назначение классов динамически создаваемым div - PullRequest
Новая
       17

Назначение классов динамически создаваемым div

0 голосов
/ 23 апреля 2019

У меня есть некоторый код, который создает определенное количество элементов 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);
    }

Ответы [ 2 ]

1 голос
/ 23 апреля 2019

Одной из основных функций 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>
1 голос
/ 23 апреля 2019

Просто переключите: 

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(...).

...