Wie kann man eine Nummer für die gleiche Klasse erhöhen?

Question

Ich möchte eine erhöhte Anzahl (beginnend mit 1 und endend mit 47) für jede Klasse namens quiz_image anzeigen.

Das HTML sieht irgendwie aus wie folgt aus:

<div class="quiz_image"> 
    Content here 
</div> 

<div class="quiz_image"> 
    Content here 
</div> 

<div class="quiz_image"> 
    Content here 
</div> 

Um quiz_image die Zahl vor der Klasse angezeigt werden, ich habe es so versucht:

var i = 1; 
$('.quiz_image').before(i); 
i++; 

In meinem Code über der Zahl wird nicht zunehmen, da wahrscheinlich eine Schleife benötigt wird und ich keine Ahnung habe, wie man in diesem Fall eine Schleife startet. Ich hoffe, dass jemand dabei helfen kann.

Answer 1

Wenn Sie jQuery verwenden, um einen Selektor zu bekommen wird es eine Reihe von Elementen zurück. Sie werden sie also durchlaufen wollen. Ich würde wie die jQuery .each() Funktion mit etwas vorschlagen, das mit einem 0 basierten Index liefert Ihnen nativ, könnten Sie so etwas wie versuchen:

$('.quiz_image').each(function(i){ 
    $(this).before(i + 1); // add one so we dont start at 0 
}); 

Answer 2

Loopin alle quiz_image und nutzen ihre Indexnummern

$('.quiz_image').each(function(index){ 

     $(this).before(index+1); 

    }); 

Working Demo

Answer 3

vor Funktion in jQuery setzt den Inhalt vor dem angegebenen Element, und es nimmt auch die Funktion, so können wir es wie das folgende Beispiel tun.

Index Funktion Suche nach einem bestimmten Element, das aus den angepassten Elementen

$('.quiz_image').before(function(){ 
return $('.quiz_image').index(this)+1 
}); 

Answer 4

Warum wollen Sie für jedes Bild die Klasse ändern? Geben Sie lieber jedem eine ID.

<div class="quiz_image"></div> 
<script> 
counter = 0; 
var quiz_id = $(".quiz_image").prop("id"); 
$(".quiz_image").each(function(){ 
counter++; 
quiz_id = quiz_id + counter 
$(".quiz_image").prop("id",quiz_id); 
});