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

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

例如，我在工作的形式存在的复选框，输入和标签形式的大名单：

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

等

我想换一个<div>围绕着输入和标签，所以结果如下：

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

谢谢！

来源

2010-08-13 Probocop

可以使用.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()

来源

2010-08-13 09:41:04 jAndy

这可能是这样做的最佳方式。 – RaYell 2010-08-13 09:43:33

完美，正是我之后的事，非常感谢。 – Probocop 2010-08-13 10:03:16

奇怪的是，我只是在JS小提琴上试过这个，它似乎没有工作;然而，詹姆斯的答案，就在下面。 – user1729506 2013-06-20 17:28:46

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>

来源

2010-08-13 09:40:11 RaYell

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

来源

2010-08-13 09:42:40 James

如果你有这样的事情：

<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>

为我工作:-)

来源

2011-12-23 09:35:28 Lida

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

回答

相关问题