jQuery - используйте переносятся () для обертывания нескольких элементов?
Как я пошел бы об использовании wrap() переносить несколько элементов (с различными классами) внутри a <div>?
Например, на форме я продолжаю работать существует большой список исходных данных флажка и маркировок в форме:
<input>
<label>
<input>
<label>
и т.д.
Я желаю перенести a <div> вокруг входа и маркировки, таким образом, результат был бы:
<div>
<input>
<label>
</div>
<div>
<input>
<label>
</div>
Спасибо!
3 ответа
Вы можете использовать метод .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 ()
Функция jQuery wrapAll позволяет обернуть несколько элементов, но если у вас есть DOM, как вы написали, то это не будет работать слишком хорошо, так как вы не можете легко сопоставить часть label и input с помощью селектора. Я предлагаю добавить несколько классов к каждой части, а затем использовать 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>
$('input+label').each(function(){
$(this).prev().andSelf().wrapAll('<div>');
});