Posted: 2020.09.22 / Category: javascript / Tag: jQuery

タイトルちょっと何言ってるかわかりませんが、フォームの入力項目をjQueryで増減させたりすることがあるかと思うのですが、その際name属性に指定されている配列のindexを採番し直す方法をご紹介します。

HTML

次のようなHTMLがあるとします。
追加ボタンをクリックするとリストが一つ増え、削除ボタンをクリックするとリストから項目が削除されます。
name属性にインデックスが割り当てられているのがわかります。
このインデックスを例えば２つ目の項目が削除された場合でも0,1となるようにします。

<div class="items">
	<button class="add-btn">追加</button>
	<ul class="item-list">
		<li class="item">
			<input type="text" name="item[0][title]" class="input">
			<textarea type="text" name="item[0][content]" class="input"></textarea>
			<button class="remove-btn">削除</button>
		</li>
		<li class="item">
			<input type="text" name="item[1][title]" class="input">
			<textarea type="text" name="item[1][content]" class="input"></textarea>
			<button class="remove-btn">削除</button>
		</li>
		<li class="item">
			<input type="text" name="item[2][title]" class="input">
			<textarea type="text" name="item[2][content]" class="input"></textarea>
			<button class="remove-btn">削除</button>
		</li>
	</ul>
</div>

jQuery

jQueryをみてみましょう。
[]の中の数字を置換しているという感じです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
(function($) {
	$(function () {
		function numbering($list) {
			$list.find('.item').each(function(index) {
				$(this).find('.input').each(function() {
					var replaceText = $(this).attr('name').replace(/\[\d+\]/, '['+index+']');
					$(this).attr('name', replaceText)
				})
			})
		}

		var $items = $('.items');

		$items.on('click', '.add-btn' ,function() {
			var $list = $(this).next('.item-list');
			var $cloneItem = $list.find('.item:last').clone();
			$list.append($cloneItem);
			numbering($list);
		});

		$items.on('click', '.remove-btn' ,function() {
			var $list = $(this).closest('.item-list');
			$(this).closest('.item').remove();
			numbering($list);
		});
	});
})(jQuery);
</script>

この手のUIいじる形でしたら、素直にReactとかVueを使った方が簡単です。