web-dev-qa-db-fra.com

Ajouter avant le dernier enfant

J'ai une div avec l'ID wrapper, et j'utilise .append() pour insérer du contenu à la fin de cette div, comme ceci:

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

Cependant, je souhaite également pouvoir insérer un nouvel enfant avant la dernière content div dans le wrapper.

Donc, si la sortie HTML 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 le dernier, je reçois donc ceci:

<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 je ferais ça?

javascriptjqueryhtmlappend
12
Boxiom

Vous pouvez utiliser .before() pour ajouter un frère avant 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 transmettez l'élément que vous souhaitez ajouter auparavant.

$("#wrapper .content:last").before('<div class="content"><div class="subcontent">Third</div></div>');
<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>

15
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>');
3
Rory McCrossan

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

$('.content:last-of-type').before('<div class="new">test</div>');
.new { color:red }
<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>

1
kapantzak

Utilisez insertBefore:

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

Insérez chaque élément dans l'ensemble des éléments correspondants avant la cible.

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

1
Tushar

Voici comment je suis arrivé là:

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

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


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

vous pouvez utiliser nième dernier enfant pour sélectionner l'avant-dernier div. fiddle: 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>');
});
0
man_luck

Tu peux faire comme ça

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

Regardez fiddle https://jsfiddle.net/48ebssso/

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

Vous pouvezlast()pour sélectionner le dernier élément etbefore()pour ajouter .

$("#wrapper .content").last().before('<div class="content"><div class="subcontent">Some stuff</div></div>');
<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>

0
Pranav C Balan