Jquery更改元素顺序

Question

如何使用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>

Answer 1

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

<强> DEMO

---

一点解释

• $('.select .classCheckBox label')选择每个label

中的每个.classCheckBox 循环中的

• $(this)指向label

• .insertBefore()在作为参数传递的匹配元素之前插入任何元素

• $(this).prev('input')指向input之前的label

• 因此，$(this).insertBefore( $(this).prev('input') )会在之前的label

之前插入每个input

---

相关参考：

• .insertBefore()

• .prev()

• .each()

---

替代方式：

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

<强> DEMO

或

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

<强> DEMO