14

jQueryを使用して隣にある入力要素の前に各ラベルを移動するにはどうすればよいですか?

<div class="input select classCheckBox">
    <label for="checkboxId">classCheckBoxs</label>
    <input type="hidden" id="checkboxId" value="" name="checkboxName" />
    <br /> 
    <div class="classCheckBox"> 
        <input type="checkbox" id="checkboxId24" value="1" name="checkboxName[]" />
        <label for="checkboxId24">1 </label>
    </div>
    <div class="classCheckBox">
        <input type="checkbox" id="checkboxId25" value="2" name="checkboxName[]" />
        <label for="checkboxId25">2</label>
    </div>
    <div class="classCheckBox"> 
        <input type="checkbox" id="checkboxId26" value="3" name="checkboxName[]" />
        <label for="checkboxId26">3</label>
    </div>
    <div class="classCheckBox">
        <input type="checkbox" id="checkboxId27" value="4" name="checkboxName[]" />
        <label for="checkboxId27">4</label>
    </div>
    <div class="classCheckBox"> 
        <input type="checkbox" id="checkboxId28" value="5" name="checkboxName[]" />
        <label for="checkboxId28">5</label>
    </div>
</div>
4

1 に答える 1

24 
$('.select .classCheckBox label').each(function() {
  $(this).insertBefore( $(this).prev('input') );
});

デモ

少し説明

  • $('.select .classCheckBox label')labelそれぞれの中からそれぞれを選択.classCheckBox

  • $(this)ループ内のポイントlabel

  • .insertBefore()引数として渡された一致した要素の前に任意の要素を挿入します

  • $(this).prev('input')input前を指すlabel

  • そのため、前の前に $(this).insertBefore( $(this).prev('input') )それぞれを挿入しますlabelinput

関連参照:

別の方法:

$('.select .classCheckBox input').each(function() {
  $(this).insertAfter( $(this).next('label') );
});

デモ

また

$('.select .classCheckBox input').each(function() {
  $(this).before( $(this).next('label') );
});

デモ

于 2012-06-25T04:07:28.660 に答える