上下内容の入れ替え（複数対応）
上下に並ぶ内容の入れ替え（複数対応）
jQuery
$(function () {
$('div.change').click(function() {
// 上要素の内容取得
var prev_element = $(this).prev('div');
// 下要素の内容取得
var next_element = $(this).next('div');
// 設定
$(this).before(next_element);
$(this).after(prev_element);
// 入力欄に採番(1番目に1、2番目に2）
$('div.element').each(function(i){
// デフォルトでvalueが設定されている場合はattr('value', value)を併用
$(this).find('input').attr('value', i + 1).val(i + 1);
});
});
});
HTML
<form>
<div class="element">
<label for="apple">リンゴ</label>
<input type="text" id="apple" value="1">
</div>
<div class="change">↑↓</div>
<div class="element">
<label for="banana">バナナ</label>
<input type="text" id="banana" value="2">
</div>
<div class="change">↑↓</div>
<div class="element">
<label for="cat">ネコ</label>
<input type="text" id="cat" value="3">
</div>
<div class="change">↑↓</div>
<div class="element">
<label for="dog">イヌ</label>
<input type="text" id="dog" value="4">
</div>
</form>
例えば、2番目バナナと3番目ネコの↑↓をクリックすると2番目と3番目のテキストが入れ替わり、bananaのvalueが2から3、catのvalueが3から2となる。
サンプル
