web-dev-qa-db-ja.com

最後の子の前に追加

IDがwrapperのdivがあり、.append()を使用して、このdivの末尾に次のようにコンテンツを挿入しています。

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

ただし、ラッパーの最後のcontent divに新しい子beforeを挿入するオプションも必要です。

したがって、HTML出力が次のようになっているとします。

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

最後の要素の前に要素を挿入したいので、これを取得します：

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

どうすればいいですか？

javascriptjqueryhtmlappend
16
Boxiom

.before() を使用して、要素の前に兄弟を追加できます。

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

.insertBefore() は、構文を変更して同じことを行います。つまり、追加する要素を選択し、追加する要素を前に渡します。

$("#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>_
24
Scimonster

insertBefore()を使用できます：

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

またはbefore()：

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

_:last-of-type_で最後の要素を選択し、before()を使用して新しい要素を追加します。

$('.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

insertBeforeを使用：

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

一致する要素のセットのすべての要素をターゲットの前に挿入します。

デモ： http://api.jquery.com/insertBefore/

1
Tushar

これは私がそこに着いた方法です：

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

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


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

最後からn番目の子を使用して、最後から2番目のdivを選択できます。フィドル： 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

あなたはこのようにすることができます

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

フィドルを見てください https://jsfiddle.net/48ebssso/

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

last()で最後の項目を選択でき、- before()追加用

$("#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