Question

我正在尝试用<label>包裹<input type="text" />，<select>和<div class="formItem"></div>元素来修复我无法直接编辑的表单上的某些定位。出于某种原因，当我尝试使用以下代码时：

$("label").before("<div class=\"formItem\">");
$("input[type=text]").after("</div>");
$("select").after("</div>");

它不起作用。它只是在每个<div class="formItem"></div>之前添加<label>，这对我没有帮助。

我已经看了.wrap();，但我不知道如何使用它来包装多个元素，就像我正在尝试做的那样。以下是HTML标记的示例：

<label>Text Box</label>
<input type="text" name="Text Box" />

<label>Select Menu</label>
<select name="Select Menu">
    <option>Example</option>
</select>

如果重要的话，大约有10套，9个文本框和1个选择框。

Answer 1

这不是jQuery API的工作方式。完全没有。

.before():

在匹配元素集中的每个元素之前插入由参数指定的内容。

.after():

在匹配元素集中的每个元素之后插入由参数指定的内容。

不要考虑开放标签和关闭标签。从实际元素的角度思考。

您可能正在寻找.wrapAll()。

$('label').each(function () {
    $(this).next('input, select').andSelf().wrapAll('<div class="formItem"/>');
});

Answer 2

使用jquery，您只能添加完整的元素。也就是说，它们必须包含结束标记。这是因为你真正在做的是调用document.createElement('div')。因此，为了解决这个问题，尽可能保持与原始代码的接近，只需使用：

var newEl = $("select").after("<div class=\"formItem\"></div>");
$("input[type=text]").appendTo(newEl);
$("select").appendTo(newEl);

Answer 3

试试这个：

$('label').next().andSelf().wrap("<div class=\"formItem\">");

它会将标签元素及其后续兄弟包含在div.formItem中。

使用.before（）;之后（）;包装元素

3 个答案: