jQuery - Verwenden Sie wrap(), um mehrere Elemente zu umhüllen?

Question

Wie würde ich mit wrap() gehen, um mehrere Elemente (mit verschiedenen Klassen) innerhalb einer <div> zu wickeln?

Zum Beispiel auf dem Formular auf ich arbeite gibt es eine große Liste von Kontrollkästchen Ein- und Etiketten in Form von:

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

etc

Ich will ein <div> wickeln um den Eingang und das Etikett, so würde das Ergebnis sein:

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

Danke!

Answer 1

Sie verwenden können.

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

Wenn Ihr Markup immer genau die gleiche Reihenfolge hat, würde ich verwenden möchten:

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

Sollte signifikant schneller sein.

Ref .: .wrapAll(), .andSelf(), .slice()

Answer 2

jQuery-Funktion wrapAll können Sie mehrere Elemente umschließen, aber wenn Sie ein DOM wie Sie haben, dann wird es nicht so gut funktionieren, wie Sie einen Teil der Beschriftung und Eingabe mit einem Selektor nicht einfach übereinstimmen können. Ich empfehle, jedem Teil einige Klassen hinzuzufügen und dann wrapAll zu verwenden.

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

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

Dies wird Ihnen die .wrapAll() Methode geben

<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

Wenn Sie so etwas wie dieses:

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

Dann können Sie mit jQuery:

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

und erhalten diese:

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

für mich gearbeitet :-)