jQuery 最初のDIVの前へ、最後のDIVを

質問

jQUeryで、
指定した要素の中にある複数のDIVの内、最初のDIVの前に
指定した要素の中の最後のDIVを複写して作成。
そして、
指定した要素の中の最後のDIVを削除する
方法について教えていただけないでしょうか。

<div id="waku"></div>
Menu=[{'Cmnt1':'aaaaaaa'},{'Cmnt1':'bbbbbbbbbb'},{'Cmnt1':'ccccccccccc'},{'Cmnt1':'ddddddddd'}];

for(var i=0;i<Menu.length;i++){
$(#waku).append(<div id="eachDiv"'+i+'">'+文字列+'</div>');
$('#eachDiv'+i).append('<br>'+i+' : '+Menu[i].Cmnt1);
}
として、以下のようなイメージのdivの構造を作成します。

<div id="waku">
　　<div id="eachDiv0">文字列
　　　　<div>0:aaaaaa</div>
　　</div>
　　<div id="eachDiv1">文字列
　　　　<div>1:bbbbbbbb</div>
　　</div>
　　<div id="eachDiv2">文字列
　　　　<div>2:ccccccc</div>
　　</div>
　　<div id="eachDiv3">文字列
　　　　<div>3:ddddddd</div>
　　</div>
</div>

上記のような構造を
以下のような構造にしたいのです。
<div id="waku">
　　<div id="eachDiv3">文字列
　　　　<div>3:ddddddd</div>
　　</div>
　　<div id="eachDiv0">文字列
　　　　<div>0:aaaaaa</div>
　　</div>
　　<div id="eachDiv1">文字列
　　　　<div>1:bbbbbbbb</div>
　　</div>
　　<div id="eachDiv2">文字列
　　　　<div>2:ccccccc</div>
　　</div>
</div>

次のようにしてみましたが、#eachDiv3の中の要素のみ複写されてしまいます。
つまり、以下のようになってしまいます。

<div id="waku">
　　<div>3:ddddddd</div>　　　　　　　//eachDiv3の中身
　　<div id="eachDiv0">文字列
　　　　<div>0:aaaaaa</div>
　　</div>
　　<div id="eachDiv1">文字列
　　　　<div>1:bbbbbbbb</div>
　　</div>
　　<div id="eachDiv2">文字列
　　　　<div>2:ccccccc</div>
　　</div>
　　<div id="eachDiv3">文字列
　　</div>
</div>

//コード
var elem=$('#waku div:last');
$('#waku div:first').before(elem.clone(true));
elem.remove();

#eachDiv3自体を先頭へ複写して、最後の#eachDiv3を削除するにはどのようにしたら良いのでしょうか。
よろしくお願いいたします。

回答No.1

fujillin · ベストアンサー

言葉を信用するのか、コードを信用するのか…？

最初にご提示のコードでは『以下のようなイメージのdivの構造』のDOMは生成されません。
イメージなのでコードをもとに生成されるほうをを考えればよいのだろうか??
（そのままでは動作しないけれど…）

てなわけで、イメージの回答
（どうせ削除するのなら、複写しないで移動し削除も省略）

$("#waku>div:first").before($("#waku>div:last"));
あるいは
$("#waku > div:last").prependTo("#waku > div:first");

お礼

fujillinさん、お早うございます。
早速のレス有り難うございます。
できました。こんなに簡単に動作するとは驚きです。
このために色々なコードを２日間も試していました。
どうもありがとうございます。

＞最初にご提示のコードでは『以下のようなイメージのdivの構造』のDOMは生成されません。
このご指摘も驚きです。
どのようなイメージとなるのでしょうか。
教えていただけないでしょうか。

＞イメージなのでコードをもとに生成されるほうをを考えればよいのだろうか??
良く理解できません。もう少し食わし腰得ていただけると有り難いのですが。

まずは、思うように動作しました。
ありがとうございました。

回答No.3

fujillin

＞「文字列」という箇所へ<div></div>を記述しないと行けないのを
＞間違えたコードを記載していました。
それを修正して、ご自身で確認してみることを強くお勧めいたします。

なお、#1の回答は
$("#waku div:first-child").before($("#waku div:last-child"));
とするほうがより良いであろう、というご指摘を某所でいただきましたのでつけ加えておきます。

お礼

fujillinさん、お早うございます。
重ねて教えていただき有り難うございます。

＞$("#waku div:first-child").before($("#waku div:last-child"));
としてみました。
DIVが入れ替わった後、#waku内のDIVのwidthが変更され、
何とその後、ｃｈｒｏｍｅがハングアップしてしまいました。
何回実行してみても同じようにハングアップしてしまいました。

回答No.2

fujillin

＞どのようなイメージとなるのでしょうか。
＞教えていただけないでしょうか。
ここの質問文にご提示のコードをご自分でコピペして実行してみればわかるはずですが。
（あくまでも、ここの質問文についてです。）
何分もかかることでもないと思います。

-----------------------------------------

ご提示のコードをコピペで動かそうとすると、多分エラーになるはず。
とりあえず、エラーをなくすのに5文字修正が必要。

さらに1文字の修正をしないと入れ子の子要素は生成されない。

（↑）を修正して作成されるＤＯＭは
　<div id="waku">
　　<div id="eachDiv0">文字列<br>0 : aaaaaaa
　　</div>
　</div>
のような構造なので、ご提示のものとは違うというわけ。

お礼

fujillinさん、重ねて有り難うございます。
理解できました。？のつもりです。
「文字列」という箇所へ<div></div>を記述しないと行けないのを間違えたコードを記載していました。

大変ご丁寧なレスありがとうございました。