jedes Element eine Klasse um 1 erhöht

Ich habe diesen HTML:jedes Element eine Klasse um 1 erhöht

<div class="nbhds-overlay active" style="display: block;"> 

    <h3><href="#">one</a></h3> 
    <h3><href="#">two</a></h3> 
    <h3><href="#">three</a></h3> 
    <h3><href="#">four</a></h3> 

</div>

Ich möchte jedem h3 eine Klasse von myclassSOMENUMBER geben, wo SOMENUMBER um 1 erhöht wird, ich weiß, wie viele Elemente gibt es, aber es wäre gut, wenn es möglich wäre, ohne die Anzahl der Elemente zu kennen (ich denke, das wäre eine rekursive Funktion?).

Wie auch immer, ich habe das folgende versucht, die jede h3 eine Klasse von myclass1 myclass3 (verständlicherweise) gibt, aber ich weiß nicht, wie man jedes einzeln anvisiert.

Grundsätzlich in diesem konkreten Beispiel sollten sie die folgenden Klassen haben, wenn es richtig gemacht: myclass1myclass2myclass3 und myclass4 sind.

function classesForNbhds() { 
     var count = $('.nbhds-overlay h3').length; 
     for (var i = 1; i <= count; i++) { 
      $('.nbhds-overlay h3').addClass('myclass'+i); 
      i++; 
     }; 
    } 

    classesForNbhds();

Quelle

2016-05-26 dzimi

Du sollst die beste Antwort nicht die schnellste annehmen. Ich akzeptierte anfänglich deine und kam dann zurück und so eine andere, die besser schien und ich hob dein q auf. Du hast mein Q abgelehnt, weil ich deine Antwort nicht akzeptiert habe ??? : D – dzimi

Du sagst es war nicht du? Wie auch immer, ich kümmere mich nicht einmal um TBO, unterm Strich bin ich wirklich dankbar für die Zeit, die du genommen hast, um meine Frage zu beantworten, und ich habe sie aufgewertet und bin froh, dass ich das getan habe. – dzimi

$('.nbhds-overlay h3').addClass(function(i) { 
 
    return 'myClass' + (i + 1); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="nbhds-overlay active" style="display: block;"> 
 

 
    <h3><href="#">one</a></h3> 
 
    <h3><href="#">two</a></h3> 
 
    <h3><href="#">three</a></h3> 
 
    <h3><href="#">four</a></h3> 
 

 
</div>

Quelle

2016-05-26 12:59:48

können Sie $().each()-Methode verwenden, um die Elemente iterieren. Dann weist die Klasse addClass()

$(".nbhds-overlay h3").each(function(i) { 
    $(this).addClass("Myclass" + (i+1)); 
});

der erste Parameter in jedem Verfahren unter Verwendung von Rückruf wird der Index des Elements sein. Hier ist es i

Quelle

2016-05-26 12:57:37

Die erste wäre 0 in diesem Fall brauchen Sie (i + 1) –

@DarrenSweeney Danke für den Vorschlag. Habe gerade meine Antwort bearbeitet –

starten: (‘. Nbhds-Overlay h3')

Verwendung $ each() zur Iteration über alle h3 tags:.

function classesForNbhds() { 
     $('.nbhds-overlay h3').each(function(i,s) { 
      $(this).addClass('myclass'+(i+1)); 
     }); 
    }

Quelle

2016-05-26 12:59:10

jedes Element eine Klasse um 1 erhöht

Antwort

Verwandte Themen