jQuery - 使用 wrap() 包装多个元素？答案

【问题标题】：jQuery - use wrap() to wrap multiple elements?jQuery - 使用 wrap() 包装多个元素？
【发布时间】：2010-08-13 09:32:06
【问题描述】：

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

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

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

等

我想在输入和标签周围加上<div>，所以结果是：

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

谢谢！

【问题讨论】：

标签： jquery

【解决方案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"/>');
}

应该会更快。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案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>

为我工作:-)

【讨论】：

【解决方案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>

【讨论】：