Ajouter quelque chose après le “n” de l'élément à l'aide de jQuery

Pour une majoration comme

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

comment ajouter un peu de balisage après la deuxième DIV par exemple?

Merci,

titel

  • Rappelez-vous que eq() commence par 0 et nth-child() commence à 1, ou vous allez devenir très en colère.
InformationsquelleAutor titel | 2009-11-24
  1. 57

    Essayer le Sélecteur CSS :nth-child():

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

    Voir aussi l'exemple sur la jQuery page de la :nth-child() sélecteur.

    InformationsquelleAutor Gumbo
  2. 16

    utiliser le :eq(index) ou :nth-child(index/even/odd/équation) sélecteur en combinaison avec la append(contenu) ou après(contenu) fonction.

    par exemple, en supposant que ce code: 

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

    utiliser append comme ce

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

    ou ce

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

    vous donnera

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

    tout en utilisant comme celui-ci après

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

    ou ce

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

    vous donnera

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

    à l'aide de :nth-child peut être utile, car il vous permet de contenu d'ensemble de tous les n nombre d'éléments.
    aussi, l'indice de l' :nth-child commence à 1, tandis que l'indice de :eq commence à 0

    par exemple, à l'aide de

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

    vous donnera

    
<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>

    • très clair! Ne peut pas faire mieux! Merci beaucoup
    InformationsquelleAutor alexanderpas
  3. 1

    $("#holder div:eq(1)") permettra de sélectionner le deuxième enfant div de la #holder div. (:eq() sélecteur d'info). Ensuite, utilisez la .after() fonction pour ajouter du contenu.

    InformationsquelleAutor keithjgrant
  5. 0

    utiliser cette

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

    Essayer comme ça:

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

    Il va insérer le <div>insert here</div> après tous les 2 rangs:

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