Jquery更改元素顺序 [英] Jquery change the Element Order

问题描述

$ b

 < div> 
 
如何在输入元素前面移动每个标签class =input select classCheckBox> 
< label for =checkboxId> classCheckBoxs< / label> 
< input type =hiddenid =checkboxIdvalue =name =checkboxName/> 
< br /> 
< div class =classCheckBox> 
< input type =checkboxid =checkboxId24value =1name =checkboxName []/> 
< label for =checkboxId24> 1< / label> 
< / div> 
< div class =classCheckBox> 
< input type =checkboxid =checkboxId25value =2name =checkboxName []/> 
< label for =checkboxId25> 2< / label> 
< / div> 
< div class =classCheckBox> 
< input type =checkboxid =checkboxId26value =3name =checkboxName []/> 
< label for =checkboxId26> 3< / label> 
< / div> 
< div class =classCheckBox> 
< input type =checkboxid =checkboxId27value =4name =checkboxName []/> 
< label for =checkboxId27> 4< / label> 
< / div> 
< div class =classCheckBox> 
< input type =checkboxid =checkboxId28value =5name =checkboxName []/> 
< label for =checkboxId28> 5< / label> 
< / div> 
< / div> 
  

解决方案

  $（ '.select .classCheckBox label'）。each（function（）{
 $（this）.insertBefore（$（this）.prev（'input'））; 
}）; 
  

DEMO

---

稍加解释

• $（'。select .classCheckBox label'）选择每个标签 .classCheckBox

中的$ c>


• $（this） code>循环内指向 label




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

• $（this）.prev 'input'）指向 label

之前的输入


• 所以， $（this）.insertBefore（$（this）.prev（'input'））会插入每个<$ c在code> input

$ b之前的$ c> label $ b

---

相关参考文献： > .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

How can I move each label in front of the input element they're next to using 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>

解决方案

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

DEMO

---

A little explain

• $('.select .classCheckBox label') select each label within each .classCheckBox

• $(this) within loop point to label

• .insertBefore() insert any element before the matched element that passed as argument

• $(this).prev('input') points the input before label

• so, $(this).insertBefore( $(this).prev('input') ) will insert each label before its previous input

---

Related refs:

• .insertBefore()

• .prev()

• .each()

---

Alternate ways:

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

DEMO

OR

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

DEMO

这篇关于Jquery更改元素顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！