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ベストアンサー
- 回答日時:
言葉を信用するのか、コードを信用するのか…?
最初にご提示のコードでは『以下のようなイメージのdivの構造』のDOMは生成されません。
イメージなのでコードをもとに生成されるほうをを考えればよいのだろうか??
(そのままでは動作しないけれど…)
てなわけで、イメージの回答
(どうせ削除するのなら、複写しないで移動し削除も省略)
$("#waku>div:first").before($("#waku>div:last"));
あるいは
$("#waku > div:last").prependTo("#waku > div:first");
fujillinさん、お早うございます。
早速のレス有り難うございます。
できました。こんなに簡単に動作するとは驚きです。
このために色々なコードを2日間も試していました。
どうもありがとうございます。
>最初にご提示のコードでは『以下のようなイメージのdivの構造』のDOMは生成されません。
このご指摘も驚きです。
どのようなイメージとなるのでしょうか。
教えていただけないでしょうか。
>イメージなのでコードをもとに生成されるほうをを考えればよいのだろうか??
良く理解できません。もう少し食わし腰得ていただけると有り難いのですが。
まずは、思うように動作しました。
ありがとうございました。
No.3
- 回答日時:
>「文字列」という箇所へ<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が変更され、
何とその後、chromeがハングアップしてしまいました。
何回実行してみても同じようにハングアップしてしまいました。
No.2
- 回答日時:
>どのようなイメージとなるのでしょうか。
>教えていただけないでしょうか。
ここの質問文にご提示のコードをご自分でコピペして実行してみればわかるはずですが。
(あくまでも、ここの質問文についてです。)
何分もかかることでもないと思います。
-----------------------------------------
ご提示のコードをコピペで動かそうとすると、多分エラーになるはず。
とりあえず、エラーをなくすのに5文字修正が必要。
さらに1文字の修正をしないと入れ子の子要素は生成されない。
(↑)を修正して作成されるDOMは
<div id="waku">
<div id="eachDiv0">文字列<br>0 : aaaaaaa
</div>
</div>
のような構造なので、ご提示のものとは違うというわけ。
fujillinさん、重ねて有り難うございます。
理解できました。?のつもりです。
「文字列」という箇所へ<div></div>を記述しないと行けないのを間違えたコードを記載していました。
大変ご丁寧なレスありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- Ruby No route matches [GET] "/posts/5/destroy" 1 2022/03/24 13:00
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
読み込んだQRコードをフォーム...
-
表示・非表示のスクリプトで、...
-
マウスを乗せるとメニュー表示
-
バッチファイルでカウントアッ...
-
removeAttribute()メソッドで削...
-
タブで開いてさらにタブ内をア...
-
console.log結果をhtmlで表示し...
-
折りたたみ部分にアンカーでリ...
-
createElementで作成した要素を...
-
多次元配列を連想配列へ変換したい
-
HTMLタグに複数のクラスを設定...
-
取得した要素がインライン要素...
-
javascriptでスタイルを動的に...
-
getElementByIdの戻り値がnull...
-
document.getElementById( ).st...
-
CSSで指定したwidthをマウスで...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
createElementで作成した要素を...
-
removeEventListenerについて
-
IFRAMEの表示/非表示を切り替え...
-
タブで開いてさらにタブ内をア...
-
変数名をどのようにつけるのが...
-
クリックで色変更後に既に変更...
-
表示・非表示のスクリプトで、...
-
HTMLとJavaScriptで作ったタイ...
-
console.log結果をhtmlで表示し...
-
jQueryでクリックされた要素のi...
-
HTMLタグに複数のクラスを設定...
-
指定したパスが現URLに含まれて...
-
iframe内のリンクが飛ばないの...
-
背景色を透明化
-
テキストエリア内の一部の文字...
-
変数内容をHTML内で表示する方法
-
classの中の<a>タグにidを追加
おすすめ情報