ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
QNo.4193046 <div>を移動するには？
質問者：benneb 以下のような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などは使えないと思いますし、どうすればイイのか見当がつきません。
もしお分かりの方おられましたら、ヒントだけでもお願い致します。
困り度：
  • 暇なときにでも
質問投稿日時：
08/07/21 13:59
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答
ANo.4 #2,3です
×助長→○冗長　あぁ恥じの上塗り・・・
回答者：steel_gray
種類：回答
どんな人：一般人
自信：参考意見
回答日時：
08/07/21 15:13
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答
ANo.3 #2です。
参考リンクのinsertBeforeの説明に
「newChild が既に樹の中にある場合には、まずそれが取り除かれる。」
と、ありましたね。削除は助長だったようです。
回答者：steel_gray
種類：回答
どんな人：一般人
自信：参考意見
回答日時：
08/07/21 15:11
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答良回答10pt
ANo.2 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-...​
回答者：steel_gray
種類：回答
どんな人：一般人
自信：参考意見
回答日時：
08/07/21 14:42
この回答へのお礼ありがとうございます。
やはりinsertBeforeですか・・・。

なんか、削除しなくても、第1引数は自動的に削除される（つまり移動）みたいですね。

回答良回答20pt
ANo.1 なんか例文が変じゃないすか？以下でどうでしょう？

<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>
回答者：yambejp
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：
08/07/21 14:36
この回答へのお礼button、ちがってました（涙）。。。

なるほど、insertBeforeなんて関数があったのですか。
ちなみに、第1引数のpとは<div id="d3">、第2引数は<div id="wrapper">という理解で合っていますか？
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ