jQuery - 使用wrap（）来包装多个元素？

Question

我如何使用wrap()在<div>内包装多个元素（包含不同的类）？

例如，在我正在处理的表单上有一个大的复选框输入列表和标签形式：

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

等

我想在输入和标签周围包裹<div>，结果将是：

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

谢谢！

Answer 1

您可以使用.wrapAll()方法。

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

如果你的标记总是完全相同的顺序，我宁愿使用：

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

应该更快。

参考：.wrapAll()，.andSelf()，.slice()

Answer 2

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

Answer 3

如果你有这样的事情：

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

然后你可以使用jQuery：

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

得到这个：

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

为我工作： - ）

Answer 4

jQuery函数wrapAll允许你包装多个元素，但如果你有一个像你所写的那样的DOM，那么它将无法正常工作，因为你不能轻易地将标签和输入的一部分与选择器匹配。我建议为每个部分添加一些类，然后使用wrapAll。

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

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

这会给你

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