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

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

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

Источник

5 ответов

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

<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/>')
Источник

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

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"]'));
Источник

Попробуй это

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 />");
Источник

Я собирался предложить обернуть флажок 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" />');

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

Источник

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

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

Кликните сюда

Источник
Другие вопросы по тегам