5

我正在尝试包装<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 个选择框。

4

3 回答 3

7

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

.before()：

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

.after()：

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

不要考虑打开和关闭标签。考虑实际元素。

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

$('label').each(function () {
    $(this).next('input, select').andSelf().wrapAll('<div class="formItem"/>');
});
于 2013-03-18T21:16:24.203 回答
1

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

var newEl = $("select").after("<div class=\"formItem\"></div>");
$("input[type=text]").appendTo(newEl);
$("select").appendTo(newEl);
于 2013-03-18T21:18:22.923 回答
1

试试这个：

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

它将标签元素和它的下一个兄弟元素包含在一个 div.formItem 中。

于 2013-03-18T21:18:43.353 回答