jQuery - çoklu öğeleri sarmak için wrap() kullanın?

Question

<div> içinde birden çok öğeyi (farklı sınıflarla) sarmak için wrap()'u nasıl kullanırım?

Örneğin, ben üzerinde çalışıyorum formdaki şeklinde onay kutusunu giriş ve etiketlerin büyük bir liste vardır:

<input> 
<label> 
<input> 
<label> 

vb Ben <div> sarmak isteyen kulüpler

giriş ve etiket çevresinde, sonuç şöyle olur: sonuç:

<div> 
    <input> 
    <label> 
</div> 
<div> 
    <input> 
    <label> 
</div> 

Teşekkürler!

Answer 1

Sen .wrapAll() yöntemi kullanabilirsiniz verecektir. İşaretlemeniz hep aynı düzeni varsa

$('form > input').each(function(){ 
    $(this).next('label').andSelf().wrapAll('<div class="test"/>'); 
}); 

, ben kullanmayı tercih ediyorum:

var $set = $('form').children();  
for(var i=0, len = $set.length; i < len; i+=2){ 
    $set.slice(i, i+2).wrapAll('<div class="test"/>'); 
}  

önemli daha hızlı olmalı.

Ref .: .wrapAll(), .andSelf(), böyle bir şey varsa .slice()

Answer 2

jQuery işlevi wrapAll Birden unsurları sarmak için ama yazdığın gibi bir DOM varsa o işe yaramaz çok sıra kolayca bir seçici ile etiket ve girişlerin bir kısmını maç olamaz sağlar. Her kısma bazı sınıflar eklemeyi ve ardından wrapAll'ı kullanmanızı öneriyorum.

<input class="i1"/> 
<label class="i1"/> 
<input class="i2"/> 
<label class="i2"/> 

$('.i1').wrapAll('<div/>'); 
$('.i2').wrapAll('<div/>'); 

Bu

<div> 
    <input class="i1"/> 
    <label class="i1"/> 
</div> 
<div> 
    <input class="i2"/> 
    <label class="i2"/> 
<div> 

Answer 3

$('input+label').each(function(){ 
    $(this).prev().andSelf().wrapAll('<div>'); 
});​ 

Answer 4

:

<input id="input1"> 
<label id="label1"> 
<input id="input2"> 
<label id="label2"> 

Sonra kullanabilirsiniz jQuery:

jQuery("#input1").next().andSelf().wrapAll('<div id="newDiv" />'); 
jQuery("#input2").next().andSelf().wrapAll('<div id="newDiv" />'); 

ve bu olsun:

<div id="newDiv"> 
    <input id="input1"> 
    <label id="label1"> 
</div> 
<div id="newDiv"> 
    <input id="input2"> 
    <label id="label2"> 
</div> 

Bu muhtemelen Bunu yapmanın en iyi yoludur