jQueryで動的に追加した要素を上下に入れ替える方法がわかりません。

Question

【やりたいこと】
１．「ボックスを追加」ボタンをクリックすると、jQueryで動的に要素を追加。（これはできています。）
２．追加した要素内の「↑ボックスを上に移動」をクリックすると、上下の要素が入れ替わる。

【陥っている状況】
・もともと設置してある「ボックスを追加」ボタンで、例えば３回増やした要素の、３番目の要素の「↑ボックスを上に移動」をクリックすると、３番目のものを２番目に移動したいのに、なぜか一番目に移動されてしまう。

【現在のコード】

<div id="sample">
	<div class="add-box">ボックスを追加</div>
</div>

<script type="text/javascript">
$(function(){
	var box_content = '<div class="box-wrapper">'
					+ '<p class="box-up">↑ボックスを上に移動</p>'
					+ '<input type="text" name="input[]">'
					+ '<p class="add-box">+ボックスを追加する</p>'
					+ '</div>';
	// #sample内の.add-boxをクリックしたとき(動的に追加した要素内にもイベント効果を持たせるために、$(selector).on(event, target, function)の書き方)
	$('#sample').on('click','.add-box',function(){
		// box_contentを追加
		$(this).after(box_content);

		// .box-upが押された時の処理
		$('.box-up').on('click',function(){
			// 押された.box-upの親のbox要素を取得
			var this_wrapper = $(this).closest('.box-wrapper');
			// 上のbox要素を取得
			var prev_wrapper = this_wrapper.prev('.box-wrapper');
			// 移動
			this_wrapper.insertBefore(prev_wrapper);
		});
	});
});
</script>

【実現したときのイメージ】

<div id="sample">
	<div class="add-box">ボックスを追加</div>
</div>

//「ボックスを追加」を押したとき動的に追加されたボックス１
<div class="box-wrapper">
  <p class="box-up">↑ボックスを上に移動</p>
  <input type="text" name="input[]">
  <p class="add-box">+ボックスを追加する</p>
</div>
//「ボックスを追加」を押したとき動的に追加されたボックス２
<div class="box-wrapper">
  <p class="box-up">↑ボックスを上に移動</p>
  <input type="text" name="input[]">
  <p class="add-box">+ボックスを追加する</p>
</div>
//「ボックスを追加」を押したとき動的に追加されたボックス３
<div class="box-wrapper">
  <p class="box-up">↑ボックスを上に移動</p>
  <input type="text" name="input[]">
  <p class="add-box">+ボックスを追加する</p>
</div>

【実現したいこと】
動的に追加されたボックス３の、「↑ボックスを上に移動」を押すと、
並びが、「１」「３」「２」になるようにしたいです。
今は、「３」「１」「２」になります。

コードをどのように直せばよいかわからず、質問させていただきます。
お分かりになる方がいらっしゃいましたら、どうかご教授いただけましたら幸いです。
何卒、よろしくお願いいたします。

Comments

[miyabi_pudding]

文章だけだとよくわからないので、
以下三点の状態の、質問者さんの意図通りのHTML状態を記載お願いします。
・初期状態
・追加、を押した時
・上に上げるボタンを押した時

[yayak]

わかりづらくなってしまい、申し訳ございません。修正いたしました。

Answer 1

「ボックスを追加」ボタンをクリックすると確かに要素は追加できているのですが、その部分に問題がありそうです。
下記記載コードを見ていただければありがたいのですが、操作手順によってHTML構成が変わってきそうです。

最初から表示されている「ボックスを追加」をクリック
→「ボックスを追加」と同階層に作成される

<div id="sample">
    <div class="add-box">ボックスを追加</div>
</div>

<div class="box-wrapper">
  <p class="box-up">↑ボックスを上に移動</p>
  <input type="text" name="input[]">
  <p class="add-box">ボックスを追加する</p>
</div>

パターン1：1.と同じように最初から表示されている「ボックスを追加」をクリック
→1. と同じ同階層に作成される

<div id="sample">
    <div class="add-box">ボックスを追加</div>
</div>

<div class="box-wrapper">
  <p class="box-up">↑ボックスを上に移動</p>
  <input type="text" name="input[]">
  <p class="add-box">ボックスを追加する</p>
</div>

<div class="box-wrapper">
  <p class="box-up">↑ボックスを上に移動</p>
  <input type="text" name="input[]">
  <p class="add-box">ボックスを追加する</p>
</div>

パターン２：1. で追加した「ボックスを追加」をクリック
→1. で追加した要素の同階層に作成される

<div id="sample">
    <div class="add-box">ボックスを追加</div>
</div>

<div class="box-wrapper">
  <p class="box-up">↑ボックスを上に移動</p>
  <input type="text" name="input[]">
  <p class="add-box">ボックスを追加する</p>

  <div class="box-wrapper">
    <p class="box-up">↑ボックスを上に移動</p>
    <input type="text" name="input[]">
    <p class="add-box">ボックスを追加する</p>
  </div>
</div>

両方まかなうという方法もなくはないですが、理想としてはパターン1. 2の手順どっちでも同じようなHTML構成になるのが理想かなと思います。
まずボックス追加ロジックを修正した方が良いかもしれません。

Comments

[yayak]

まさか入れ子になってしまっていたなんて、指摘されるまで気づきませんでした。
入れ子にならないように、ボックスの追加は1つのボタンだけで行うことでひとまず対応したいと思います！
ご指摘心より感謝いたします。有難うございます。

Answer 2

構造がぐちゃぐちゃでこのままやってもいいことないですね
.add-boxがトリガーになるなら.box-wrapperの中に.add-boxはいれちゃまずいです

参考

• CodePen

Comments

[yambejp]

.box-wrapper内の.add-boxで.box-wrapperを追加すると
.box-wrapperがどんどん入れ子になります

[yayak]

ご提示いただいたコードで理想通りの動きを実現することができました。
本当に有難うございます。
var this_wrapper = $(this).closest('.box-wrapper');
var prev_wrapper = this_wrapper.prevAll('.box-wrapper:first');
var prev_p = this_wrapper.prevAll('.add-box:first');
var after_p = this_wrapper.nextAll('.add-box:first');
if(this_wrapper.prevAll('.add-box').length>1){;
after_p.after(prev_p);
after_p.after(prev_wrapper);
}
上記の部分のコードを見て、:firstの使い方や、if(this_wrapper.prevAll('.add-box').length>1){;の発想などが全くなかったため、勉強不足を痛感いたしました。
JavaScript系からずっと逃げていた節があったので、これを機にもっと勉強したいと思います。
重ねて、丁寧なわかりやすいコードで助けていただき、本当に有難うございます。心から感謝申し上げます。