Dodanie cyfry do klasy

0

Witam czy jest możliwość w js dodać cyfre do klasy przy pomocy zmiennej.
Mam np 20 kontenerów generowanych dynamicznie z bazy o klasach:
kontener0
kontener1
itp z tym że cyfra jest brana z pętli for i jest to zmienna i.
Teraz w js lub jquery chciałbym również w pętli for aby każdy element po najechaniu dostawał inną klasę i stąd moje pytanie czy istnieje jakiś sposób aby to zrobić?

foreach ($articles as $key => $article){
                    <a href="/" class="artbox">
                        <div class="zdjecieart{{$key}} zdjecieart">
                            <img src="<?=$article->grafika;?>" alt="">
                        </div>
                        <div class="napisy">
                            <div class="tytul">
                                <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h2>
                            </div>
                            <div class="wstep" style="display: none">
                                <p><?=$article->wstep;?></p>
                            </div>
                        </div>
                    </a>
}
1

https://www.google.com/search?ei=1enqX-mlGM7zkgXYoZmYAQ&q=dynamic+class+generation+javascript+css&oq=dynamic+class+generation+javascript+css&gs_lcp=CgZwc3ktYWIQAzIICCEQFhAdEB46BAgAEEc6CQgAEMkDEBYQHlCOXFiramDaa2gBcAJ4AIABR4gB0QKSAQE1mAEAoAEBqgEHZ3dzLXdpesgBCMABAQ&sclient=psy-ab&ved=0ahUKEwip5JH04_LtAhXOuaQKHdhQBhMQ4dUDCA0&uact=5
https://stackoverflow.com/questions/1720320/how-to-dynamically-create-css-class-in-javascript-and-apply

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { color: #F00; }';
document.getElementsByTagName('head')[0].appendChild(style);

document.getElementById('someElementId').className = 'cssClass';

i teraz w petli (od 1 do 20) tworzysz sobie klasy (tak jak tutaj jest pokazana cssClass)

2

Za bardzo nie rozumiem o co pytasz, ale jeśli jednak dobrze udało mi się zrozumieć problem, to rzuć okiem na https://jsfiddle.net/72qnbd6y/1/

function bleble() {
  for (terazTenDiv = 1; terazTenDiv < 9; terazTenDiv++) {
    var zmienDiva = document.getElementById('div'+terazTenDiv);
    zmienDiva.innerHTML = ('DIV nr ' + terazTenDiv);
  }
}
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<button onclick="bleble()">PRESS BATON</button>
div {
  width: 100px;
  height: 50px;
  border: 2px solid green;
  margin: 5px;
  display: inline-block;
}

Tutaj masz pokazane jak w pętli odwołać się do konkretnych DIV. Teraz, jeśli umiesz zrobić to, czego Tobie potrzeba do szczęścia z jednym div'em, to analogicznie przerób podany kod żeby wykonywał Twoją akcję w pętli.

1 użytkowników online, w tym zalogowanych: 0, gości: 1