web-dev-qa-db-ja.com

jQueryでHTML要素を移動するにはどうすればよいですか？

私のHTML構造は次のとおりです。

<div id="parent">
   <div id="1">Some content</div>
   <div id="2">Some content</div>
</div>

要素id="2"をid="1"の前に移動して、次のようにします。

<div id="parent">
   <div id="2">Some content</div>
   <div id="1">Some content</div>
</div>

JQueryでそのようなことを行うにはどうすればよいですか？

javascriptjqueryhtmldom
40
GusDeCooL

次のように .insertBefore() を使用できます。

_$("#2").insertBefore("#1");
_

または、 .prependTo() 、次のように：

_$("#2").prependTo("#parent");
_

...または_#1_と .insertAfter() および .appendTo() ...を使用する逆、または実際にいくつかの他の方法、それはあなたが実際に何を求めているかによって異なりますが、上記の2つのメソッドは、2つのIDが与えられた場合、可能な限り最短になるはずです。

私はと仮定していますこれは単なる例であり、実際のHTML4ページでは数字で始まらないIDを使用することを忘れないでください、それらは無効ですそしていくつかの問題を引き起こします。

74
Nick Craver

単純に：

$('#1').before($('#2'));
7
David Tang

jQuery UI Sortable の使用を考えたことがありますか？

3
Pit