Блог

Я пытаюсь просмотреть коллекцию HTMLCollection и добавить вновь созданный элемент к соответствующим дочерним элементам. Есть 3 условия, на которые я обращаю внимание, если у детей 1 из 3 классов:

1. тип-халява
2. тип-взлом
3. тип-пост

Я смог настроить большую его часть и успешно прикрепить нужный мне элемент к каждой отдельной группе, однако, когда появляются два или более различных типа, добавляется только один, а другой-нет. Я попытался выяснить, в чем проблема, и я думаю, что это связано с тем, что htmlколлекции не работают как массивы, но я, похоже, не могу указать на это пальцем.

Я вставил фрагменты кода ниже того, что у меня есть до сих пор, и HTML-код, которым я пытаюсь манипулировать в DOM после этого.

Был бы признателен за любую информацию, которую я, возможно, упускаю.

 const card_Group = jQuery('#latest-cst-query > .elementor-widget-container > .elementor-posts');

const cf_div = document.createElement("a");
const ch_p = document.createElement("a");
const cp_a = document.createElement("a");

for (cards of card_Group) {
let cardChild = cards.children;
for (card of cardChild){
    if (card.classList.contains("type-freebie")){
       cf_div.classList.add("freebie_tax", "freebie_fcol");
       cf_div.innerText = "Freebie";
    card.firstElementChild.append(cf_div);
   } if (card.classList.contains("type-hack")){
       ch_p.classList.add("freebie_tax", "freebie_hcol");
       ch_p.innerText = "Hack";
       card.firstElementChild.append(ch_p);
   } if (card.classList.contains("type-post")) {
       cp_a.classList.add("freebie_tax");
       cp_a.innerText = "Blog";
       card.firstElementChild.append(cp_a);
   }
}
}
 

Проблема здесь в том, что вы создаете только один элемент в группе, а при добавлении во второй раз он фактически перемещается.

Поэтому все, что вам нужно сделать, это создать новый элемент до его добавления.

 for (card of cardChild){
    if (card.classList.contains("type-freebie")){
       let cf_div = document.createElement("a");
       cf_div.classList.add("freebie_tax", "freebie_fcol");
       cf_div.innerText = "Freebie";
       card.firstElementChild.append(cf_div);
    }
 

Вы даже можете его клонировать:

 const cf_div = document.createElement("a");
cf_div.classList.add("freebie_tax", "freebie_fcol");
cf_div.innerText = "Freebie";

for (card of cardChild){
    if (card.classList.contains("type-freebie")){
      card.firstElementChild.append(cf_div.cloneNode(true));
    }