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（）來包裝多個元素？

回答

相關問題