Javascript 使用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

复选框字段_1
复选框字段_1
复选框字段2
复选框字段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>

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

复选框字段_1
复选框字段_1
复选框字段2
复选框字段2

我尝试了

$（“input[name=field_1]”。wrappAll（“”）

，但这将在输入元素周围创建一个包装，但不包括“Checkbox field_1…”尝试以下操作：

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"]'));

函数wrapFieldSet（字段）{
var包装器=$（''）；
fields.first（）.before（包装器）；
字段。每个（函数（）{
var text=$（this.nextSibling）；
append（$（this））.append（text）；
});
}
wrapFieldSet（$（'input[name=“field_1”]”）；

它应该可以工作：

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

$（'input[name=field_1]'）。wrapAll（“”）；

试试这个

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 />");

var$div=$（“”），接下来，$this；
$（$input[name=field_1]：first”）。在（$div）之前；
$（“输入[name=field_1]”）。每个（函数（）{
$this=$（this）；
next=$this.next（）；
$div.append（$this）；
$div.append（下一个）
});
$div=$（“”）；

我建议将复选框字段_1等包装在标签中，为每个字段添加类，并使用此包装示例实现您的目标

i、 e

复选框字段_1
复选框字段_1

然后使用

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

$（'.bar'）.wrap（''）；

---

然后使用另一个类执行第二部分

我建议您修改现有代码，使其类似于：

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

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

复选框字段_1
复选框字段_1
复选框字段2
复选框字段2

这不仅可以简化jQuery代码（因为jQuery很好地处理标记节点，而不是文本节点），而且还可以提高可访问性，因为复选框后面的标签可以单击

然后在jQuery中：

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

$（'input[name=“field_1”]”）。parent（）.wrapAll（“”）

您还应该养成在输入字段中添加id属性的习惯。更新后也可以捕获文本节点。这可能是复制到堆栈溢出时的输入错误，但它是

wrapAll（）

（单-'P'，而不是双精度）。我们知道这是一个问题，我们知道这是关于jQuery的。您能改进您的问题标题吗？删除文本与包装文本不同。您在这里看到的是删除文本的位置吗？$（'input[name=field_1'）。wrapAll（“”）；您在示例中看到的文本在哪里？您在代码中处理的文本在哪里？您在发布答案时将其从问题中完全删除。