Использование.before(); и после(); обернуть элементы

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.