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

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

例如，在我正在处理的表单上，有一个checkboxinput和标签的大列表，格式如下：

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

等等

我想要围绕input和标签包装一个<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"/>'); } 

应该快得多。

Ref .: .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那么它不会工作得太好，因为你不能很容易地将标签的一部分和input与select器相匹配。 我build议添加一些类到每个部分，然后使用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>