2011-01-10 15 views
2

私はこれを行う方法が少し分かりません。私はアクションに基づいてDIVを表示するメインパネルを持っています。 、私は何かが起こるとき、私はちょうど= 1のdivのid上のdivのid = 2を置くことができるようにそれを作りたい、むしろポジショニングをいじりよりJQuery(Javascript)/ CSS、配置を使わずにDIV内の要素の順序を並べ替える方法は?

<div id="container"> 
    <div id="1"></div> 
    <div id="2"></div> 
</div> 

:私はHTMLで次のようにレイアウトさDIVSを持っています可能な限り単純に。アドバイスをいただければ幸いです。

+0

は、だから、シーケンシャルレイアウトために、上記Zインデックス、またはを意味するのですか? –

答えて

6

表示している例では、appendprependのjqueryメソッドを使用できます。例えば

、その後のdiv#1

$('#container #2').remove().prependTo('#container'); 

DIVその後、#1のdiv#2

$('#container').append('#1').append('#2'); 

並べ替え、DIV#2あなたがこれを書くことができる多くの方法があります。 prependは、コンテナの先頭(最初の要素の前)に要素を配置し、最後の要素の後に要素を配置することを覚えておいてください。append

+0

ありがとう、すばらしい答えこれはたくさんの助けがあり、jQueryの不必要で不必要な使用のために – Rick

+0

-1を助けます。 –

+0

@torazaburo - OPによってjQueryで質問されました。この回答は、OPによる正解として受け入れられました。この質問は2歳以上です。あなたはダウン投票を理解していないようですので、[ここ](http://stackoverflow.com/privileges/vote-down)を読んでください。 –

1

divの絶対位置を決めるだけです。何かが起きた場合は、要素のz-indexを設定するだけです。例えば (簡単なJSを使用して):

var d1 = document.getElementById('1'); 
var d2 = document.getElementById('2'); 

d1.style.zIndex = 1; 
d2.style.zIndex = 2; 

あなたがそれらを更新したい場合は、単にのZIndexをリセット;)

+0

ああ、彼らはちょうどお互いの上にあることができますので、私は私のCSSにちょっと錆びているので、これを実現しませんでした – Rick

+0

はい!絶対的な位置決めで確実!または、単にdivを表示/非表示にしたい場合は、d1.style.display = "none"および/またはd2.style.display = "block"を使用できます。 DOM要素を切り替えるだけの場合は、いくつかのjQueryメソッドを使用して順序を変更できます。 (Josiah Ruddellが書いたように) – stecb

+0

ahh私は自分がやろうとしていることに対して絶対的なポジショニングを使うことはできないと思っていますが、他の方法を試してみる必要があります – Rick

0

第二の要素を削除して、最初の要素の前にそれを再挿入。

のjavascript:あなたは上記の言ったとき

var d1 = document.getElementById('1'); 
var d2 = document.getElementById('2'); 

d2.parentNode.removeChild(d2); 
d1.parentNode.insertBefore(d2, d1); 
​