JQuery - использовать wrap() для переноса нескольких элементов?

Как я могу использовать wrap() для переноса нескольких элементов (с разными классами) внутри <div>?

Например, в форме, над которой я работаю, есть большой список входов и меток флажка в виде:

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

и т.д.

Я хочу обернуть <div> вокруг ввода и метки, поэтому результат будет выглядеть следующим образом:

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

Спасибо!

Ответы

Ответ 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()

Ответ 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>