- ベストアンサー
<div>を移動するには？
以下のようなhtmlがあります。 -------------------------------------------- <html> <body> <div id="wrapper"> <div id="d1">ここは第1番です。<form type="input" name="b1" value="Topへ"></form></div> <div id="d2">ここは第2番です。<form type="input" name="b2" value="Topへ"></form></div> <div id="d3">ここは第3番です。<form type="input" name="b3" value="Topへ"></form></div> <div id="d4">ここは第4番です。<form type="input" name="b4" value="Topへ"></form></div> <div id="d5">ここは第5番です。<form type="input" name="b5" value="Topへ"></form></div> </div> </body> </html> -------------------------------------------- 例えばボタン"b3"を押すと、<div id="d3">が一番上に移動するようにするには、どうしたら良いでしょうか？ 残りのdivはそのままの順位で下にずれることになります。 sortなどは使えないと思いますし、どうすればイイのか見当がつきません。 もしお分かりの方おられましたら、ヒントだけでもお願い致します。
- benneb
- お礼率56% (14/25)
- JavaScript
- 回答数4
- ありがとう数18
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
なんか例文が変じゃないすか？以下でどうでしょう？ <script> function goTop(obj){ var p=obj.parentNode; var pp=p.parentNode; pp.insertBefore(p, pp.childNodes.item(0)); } </script> <div id="wrapper"> <div id="d1">ここは第1番です。<input type="button" name="b1" value="Topへ" onclick="goTop(this)"></div> <div id="d2">ここは第2番です。<input type="button" name="b2" value="Topへ" onclick="goTop(this)"></div> <div id="d3">ここは第3番です。<input type="button" name="b3" value="Topへ" onclick="goTop(this)"></div> <div id="d4">ここは第4番です。<input type="button" name="b4" value="Topへ" onclick="goTop(this)"></div> <div id="d5">ここは第5番です。<input type="button" name="b5" value="Topへ" onclick="goTop(this)"></div> </div>
その他の回答 (3)
- steel_gray
- ベストアンサー率66% (1052/1578)
#2,3です ×助長→○冗長 あぁ恥じの上塗り・・・
- steel_gray
- ベストアンサー率66% (1052/1578)
#2です。 参考リンクのinsertBeforeの説明に 「newChild が既に樹の中にある場合には、まずそれが取り除かれる。」 と、ありましたね。削除は助長だったようです。
- steel_gray
- ベストアンサー率66% (1052/1578)
wrapperから一旦削除 先頭に挿入すればいいかと。 <div id="d1">ここは第1番です。<input type="button" value="Topへ" onclick="sample(this)"></div> function sample(O){ var wrapper=document.getElementById('wrapper'); var target=O.parentNode;//押されたボタンの親 wrapper.removeChild(target);//wrapperから削除 wrapper.insertBefore(target,wrapper.firstChild);//先頭に挿入 } http://www.doraneko.org/misc/dom10/19981001/level-one-core.html#ID-1950641247
お礼
ありがとうございます。 やはりinsertBeforeですか・・・。 なんか、削除しなくても、第1引数は自動的に削除される（つまり移動）みたいですね。
お礼
button、ちがってました（涙）。。。 なるほど、insertBeforeなんて関数があったのですか。 ちなみに、第1引数のpとは<div id="d3">、第2引数は<div id="wrapper">という理解で合っていますか？