上下内容の入れ替え(複数対応)

上下に並ぶ内容の入れ替え(複数対応)

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となる。

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。主にLAPP環境でPHPを書いています。最近はjQueryで遊んでいます。
※動作確認について