Fügen Sie mit jQuery etwas nach dem “n”-Element hinzu

Lesezeit: 3 Minuten

Benutzer-Avatar
Titel

Für ein Markup wie

<div id="holder">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
</div> 

Wie füge ich zum Beispiel Markup nach dem zweiten DIV hinzu?

  • Denken Sie daran, dass eq() mit 0 beginnt und nth-child() mit 1 beginnt, sonst werden Sie sehr wütend.

    – Nosredna

    24. November 2009 um 18:48 Uhr

Versuchen Sie die CSS-Selektor :nth-child():

$("#holder > div:nth-child(2)").after("<div>foobar</div>");

Siehe auch das Beispiel auf der jQuery-Seite der :nth-child() Wähler.

Benutzer-Avatar
Alexanderpas

benutze die :eq(Index) oder :nth-child(index/gerade/ungerade/gleichung) Selektor in Kombination mit dem anhängen (Inhalt) oder nach (Inhalt) Funktion.

Nehmen wir zum Beispiel diesen Code an:

<div id="holder">
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>
</div>

Verwenden Sie append wie folgt

$("#holder>div:eq(1)").append("<div>inserted div</div>");

oder dieses

$("#holder>div:nth-child(2)").append("<div>inserted div</div>");

werde dir geben


<div id="holder">
    <div>div 1</div>
    <div>div 2<div>inserted div</div></div>
    <div>div 3</div>
    <div>div 4</div>
</div>

während der Verwendung nach so

$("#holder>div:eq(1)").after("<div>inserted div</div>");

oder dieses

$("#holder>div:nth-child(2)").after("<div>inserted div</div>");

werde dir geben


<div id="holder">
    <div>div 1</div>
    <div>div 2</div>
    <div>inserted div</div>
    <div>div 3</div>
    <div>div 4</div>
</div>

Die Verwendung von :nth-child kann nützlich sein, da Sie damit Inhalte für jede n Anzahl von Elementen festlegen können. Außerdem beginnt der Index von :nth-child bei 1, während der Index von :eq bei 0 beginnt

zum Beispiel mit

$("#holder>div:nth-child(2n)").after("<div>inserted div</div>");

werde dir geben


<div id="holder">
    <div>div 1</div>
    <div>div 2</div>
    <div>inserted div</div>
    <div>div 3</div>
    <div>div 4</div>
    <div>inserted div</div>
</div>

Benutzer-Avatar
AG

Benutze insertAfter(selector)

.insertAfter()

$("#holder div:eq(1)") wählt das zweite untergeordnete div des aus #holder div. (:eq() Selektorinfo). Dann nutzen Sie die .after() Funktion zum Anhängen von Inhalten.

benutze das

 $("ul li:nth-child(4n)").add('ul li:last').after("<div style="clear:both;">&nbsp;</div>");

Benutzer-Avatar
Ghassen Louhaichi

Versuchen Sie es so:

$("#holder > div:nth-child(2n)").after("<div>insert here</div>");

Es fügt die ein <div>insert here</div> nach jeder 2. Reihe:

$("#holder > div:nth-child(2)").after("<div>insert here</div>");

1246470cookie-checkFügen Sie mit jQuery etwas nach dem “n”-Element hinzu

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy