jquery - jQueryで兄弟として何かを追加するにはどうすればよいですか？

Question

たとえば、私が持っているとしましょう

<div class="sibling1"></div>
<div class="sibling3"></div>

どうすれば挿入できますか

<div class="sibling2"></div>

上記の間？prependを試しましたが、これにより子供は兄弟で​​はなくなります

Answer 1

jQuery には、特定の位置にコンテンツを挿入するためのさまざまなオプションが多数あります。オブジェクト外への DOM 挿入については、jQuery のドキュメント ページにすべて詳しく説明されています。

既存の要素 (例: 子ではない) の外側にコンテンツを挿入するが、そのオブジェクトに対して相対的に配置するには、次のjQuery docスクリーンショットに示されている 4 つのオプションがあります。

最初の 2 つと最後の 2 つの違いは、どちらの引数がどちらであるかだけです。最初の 2 つの場合、挿入する場所は jQuery オブジェクト内にあり、コンテンツは関数の引数内にあります。最後の 2 つの場合、挿入されるコンテンツは jQuery オブジェクトにあり、宛先は関数の引数にあります。複数の関数呼び出しが連鎖しているため、どちらか一方が便利な場合があります。

ご覧のとおり、これにより、既存のオブジェクトの前または後にコンテンツを挿入できます (これにより、そのオブジェクトの兄弟になります)。

そのオブジェクトの子にしたい場合は、、、、などを含む内部コンテンツを設定/変更できる6つのjQueryメソッドのいずれかを使用できます....append().appendTo().html()

Answer 2

次のように、後に使用します。

$('.sibling1').after('<div class="sibling2"></div>');

クラスの代わりにIDを使用することもできます。これは、次のように私にとってより正しいと感じます。

<div id="sibling1" class="sibling"></div>
<div id="sibling3" class="sibling"></div>

そして、以下を使用します。

$('#sibling1').after('<div id="sibling2" class="sibling"></div>');

Answer 3

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

$('<div class="sibling2"></div>').insertBefore($('.sibling3'));