Ajouter de l'avant-dernier enfant

J'ai un div avec l'ID wrapper, et je suis en utilisant .append() d'ajouter du contenu à la fin de la div, comme ceci:

$("#wrapper").append('<div class="content"><div class="subcontent">Some stuff</div></div>');

Cependant, je veux aussi la possibilité d'insérer un nouvel enfant avant la dernière content div dans l'emballage.

Donc, si le code HTML de sortie ressemble à ceci:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

Je veux insérer un élément avant que le dernier, donc je me présente:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Third
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

Comment puis-je faire?

Est-ce que vous souhaitez? api.jquery.com/insertbefore
Je vais essayer de faire un jsfiddle
maintenant son travail ou pas ? Je viens de changer votre div id et de son travail.

InformationsquelleAutor Boxiom | 2015-05-06

Vous pouvez utiliser .avant() pour ajouter un frère ou une sœur avant de l'élément:

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');

.insertBefore() fait la même chose avec une syntaxe différente, à savoir que vous sélectionnez l'élément à ajouter, et de passer l'élément que vous souhaitez l'ajouter avant.

JS:

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

InformationsquelleAutor Scimonster

Vous pouvez utiliser insertBefore():

$('<div class="content"><div class="subcontent">Some stuff</div></div>').insertBefore('#wrapper > div:last');

Ou before():

$('#wrapper > div:last').before('<div class="content"><div class="subcontent">Some stuff</div></div>');

InformationsquelleAutor Rory McCrossan

Sélectionnez le dernier élément avec :last-of-type et l'utilisation before() pour ajouter le nouvel élément:

JS:

$('.content:last-of-type').before('<div class="new">test</div>');

CSS:

.new { color:red }

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

InformationsquelleAutor kapantzak

1

Utilisation insertBefore:
```
$('<div class="content"><div class="subcontent">Third</div></div>').insertBefore('#wrapper .content:last');
```
Insérer tous les éléments de l'ensemble des éléments qui correspondent avant de la cible.

Démo: http://api.jquery.com/insertBefore/

InformationsquelleAutor Tushar

C'est comment j'y suis arrivé:

http://jsfiddle.net/lharby/00tk6avg/

var htmlString = '<div class="content"><div class="subcontent">Some stuff</div></div>'


$(htmlString).insertBefore('.content:last-child');

InformationsquelleAutor lharby

$( "<p>Test</p>" ).insertBefore( "#wrapper > div:last-child" );

InformationsquelleAutor braks

Vous pouvez last() pour sélectionner le dernier élément, et avant() pour l'ajout

JS:

$("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</div></div>');

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
    <div class=" content ">
        <div class="subcontent ">
            First
        </div>
    </div>
    <div class="content ">
        <div class="subcontent ">
            Second
        </div>
    </div>
</div>

InformationsquelleAutor Pranav C Balan

vous pouvez utiliser nième dernier enfant pour sélectionner la dernière seconde div.
violon:
http://jsfiddle.net/08ta9wnL/

html:

<div id="wrapper">
    <div class="content">
        <div class="subcontent">
            First
        </div>
    </div>
    <div class="content">
        <div class="subcontent">
            Second
        </div>
    </div>
</div>

javascript:

$(document).ready(function(){
    $("#wrapper div:nth-last-child(2)").append('<div class="content"><div class="subcontent">Some stuff</div></div>');
});

InformationsquelleAutor man_luck

0

Vous pouvez le faire comme ceci

$("#wrapper .content:last").before("<div class="content"><div class="subcontent">Some stuff</div></div>");

Regarder violon https://jsfiddle.net/48ebssso/
- Cela insère comme un enfant, pas un frère ou une sœur.
- cela va maintenant créer un frère ou une sœur
InformationsquelleAutor Ritu Gupta

Vous devez vous connecter pour publier un commentaire.