Обтекание групп входных элементов с помощью jQuery

Question

У меня следующий код:

<input type="checkbox" name="field_1" value="on" /> Checkbox field_1
<input type="checkbox" name="field_1" value="off" /> Checkbox field_1


<input type="checkbox" name="field_2" value="on" /> Checkbox field_2
<input type="checkbox" name="field_2" value="off" /> Checkbox field_2

Мне нужно обернуть эти элементы с помощью jQuery.Это должно выглядеть примерно так:

<div>
<input type="checkbox" name="field_1" value="on" /> Checkbox field_1
<input type="checkbox" name="field_1" value="off" /> Checkbox field_1
</div>
<div>
<input type="checkbox" name="field_2" value="on" /> Checkbox field_2
<input type="checkbox" name="field_2" value="off" /> Checkbox field_2
</div>

Я пробовал $("input[name=field_1]".wrappAll("<div></div>"), но это создаст оболочку для элементов ввода, но не будет включать "Флажок field_1 ...."

Answer 1

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

<label><input type="checkbox" name="field_1" value="on" /> Checkbox field_1</label>
<label><input type="checkbox" name="field_1" value="off" /> Checkbox field_1</label>

<label><input type="checkbox" name="field_2" value="on" /> Checkbox field_2</label>
<label><input type="checkbox" name="field_2" value="off" /> Checkbox field_2</label>

Это не только упростит ваш код jQuery (для jQuery очень хорошо работает с узлами тегов, но не так хорошо работаеттекстовые узлы), но также улучшит доступность, поскольку метки после флажков станут кликабельными.

Затем в jQuery:

$('input[name="field_1"]').parent().wrapAll('<div/>')

Answer 2

Я собирался предложить обернуть флажок field_1 и т. Д. В метку, добавить классы к каждому из них и использовать этот пример переноса jQuery API для достижения вашей цели

т.е.

<input id="foo1" class="bar" type="checkbox" name="field_1" value="on" /> 
<label class="bar" for="foo1">Checkbox field_1</label>
<input id="foo2" class="bar" type="checkbox" name="field_1" value="off" />
<label class="bar" for="foo2">Checkbox field_1</label>

Тогда используйте

$('.bar').wrap('<div class="something" />');

Затем выполните второй раздел с другим классом

Answer 3

должно работать:

$('input[name=field_1]').wrapAll('<div />');

Нажмите здесь

Answer 4

Попробуйте это

var $div = $("<div />"), next, $this;

$("input[name=field_1]:first").before($div);
$("input[name=field_1]").each(function(){
  $this = $(this);
  next = $this.next();
  $div.append($this);
  $div.append(next)
});

$div = $("<div />");

Answer 5

Попробуйте это:

function wrapFieldSet(fields) {
    var wrapper = $('<div class="wrapper"></div>');
    fields.first().before(wrapper);
    fields.each(function() {
        var text = $(this.nextSibling);
        wrapper.append($(this)).append(text);
    });
}

wrapFieldSet($('input[name="field_1"]'));