Javascript Добавить пользовательский активный класс внутри цикла

Question

У меня есть два цикла, как показано ниже, и вам нужно добавить пользовательский active- numberHere класс к первому изображению каждого div с указанным номером.
*Например, 1006 *, если номер класса div равен img-4 , поэтому добавьте класс active-4 в первый тег img.

Но у меня есть некоторые проблемы с кодом, которые вы можете увидеть на прикрепленном изображении. в первом изображении div есть правильный класс.
но в другом изображении div есть дополнительные активные, такие как active-4 active-3 и ...!

Как решить эту проблему?

// LOOP Create Image Div 
let numDiv = 5;
for (k = 0; k < numDiv; k++) {

    //Add div area inside Div(products)
    let imgPart = `<div class="img-${k} shoe-part"> </div>`;
    document.querySelector(".products").insertAdjacentHTML("afterbegin", imgPart);
    
    
// LOOP Create Image List Inside Divs 
    let numImg = 3;
    for (j = 0; j < numImg; j++) {
    
        //Add Image List Inside Above Div(shoe-part)
        let imgList = `<img class="res-img" src="img/image-${k}.png">`;
        document.querySelector(".shoe-part").insertAdjacentHTML("afterbegin", imgList);
    }
$('.shoe-part img:first-child').addClass(`active-${k}`);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="products">

</div>

Answer 1

• Простой способ сделать это с помощью jquery - использовать html() и prepend() или append()
• для добавления класса. Вы можете использовать простой оператор if внутри цикла

// LOOP Create Image Div 
let numDiv = 5;
for (k = 0; k < numDiv; k++) {

    //Add div area inside Div(products)
    var DivPart = `<div class="img-${k} shoe-part"></div>`;
    
    
// LOOP Create Image List Inside Divs 
    let numImg = 3;
    let ImgPart = '';
    for (j = 0; j < numImg; j++) {
        //Add Image List Inside Above Div(shoe-part)
        var AddClass = (j === 0) ? 'active-'+k : ''; // shorthand if statement to add the class only when j = 0
        ImgPart += `<img class="res-img ${AddClass}" src="img/image-${k}.png">`;  // add all the images in the valriable ImgPart by using += it means sum/combine/addto
    }
    DivPart = $(DivPart).html(ImgPart); // update DivPart with the whole div with images in it
    $('.products').prepend(DivPart); // prepend the DivPart to the product div
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="products">

</div>