Come puoi prendere elementi in dom e applicare diversi css senza id?

Question

Sono un po 'confuso qui. Sto lavorando ad un progetto dinamico e voglio applicare diversi css a div che hanno la stessa classe ma nessun id. Come posso applicare CSS diverso dico prima div con stessa classe, e quindi diverso css alla seconda div della stessa classe e così via ... Diciamo che ho fullwidthContainer classe applicata al divs Per la prima div , Voglio la larghezza 1000px, al secondo voglio 800px e così via. Non posso fornire un ID o un'altra classe qui poiché è generato dinamicamente. Per favore aiuto.

Grazie.

Ok ho fatto questo utilizzando JavaScript

function emphatic() 
{ 
    var totalContainers=document.getElementsByClassName('fullwidthContainer') 
    var className=1; 

    for (var i = 0; i < totalContainers.length; i++) { 
     className=className+1; 
     totalContainers[i].setAttribute("class", "dropdown_5columns fullwidthContainer customMenuClass"); 
    }; 

} 
emphatic(); 

Ora come faccio aggiungo nomeclasse sommando 1 ogni volta alla nuova classe. voglio dire una cosa del genere customclass1, customclass2 e così via per div .. grazie,

Answer 1

Forse è possibile utilizzare gli indici degli elementi anche se non è del tutto chiaro se si hanno rapporti da abbinare:

Esempio con incrementi di base sull'indice:

$('.someClass').each(function(index){ 
    $(this).width(300 * (index+1)); 
}); 

Esempio con matrice:

var widths =[ 600, 900, 500]; 

$('.someClass').each(function(index){ 
    $(this).width(widths[index]); 
}); 

La versione di array potrebbe anche essere adattata per aggiungere classi.

Indice inizia a zero essendo primo elemento corrispondente nella pagina

Answer 2

Forse sei giardini.L interessato a una soluzione javascript pura.

var divs = document.getElementsByClassName('myClass'); 
var width = [100,200,300]; 
for(var i=0;i<divs.length;i++) { 
    divs[i].style.width = width[i] + 'px'; 
    // increases classname by i 
    divs[i].className = 'myClass anotherClass' + i; 
}