Синтаксис JQuery Wrap

Question

Конец дня. Я надеюсь, что у меня просто ошибка логики.

Я не могу заставить это работать:

var $divA= $("<div></div>").addClass('classA');

var $divB= $("<div></div>").addClass('classB');

$myDiv.after($divA.wrap($divB));

Выше должно повернуть это:

<div id="myDiv"></div>

В это:

<div id="myDiv"></div>
<div class="classB">
    <div class="classA"></div>
</div>

Но, похоже, он не работает с этим «обертыванием» там. Я не получаю никаких ошибок, он просто не оборачивает divA с помощью divB, а просто сам вставляет divA

Неужели я неправильно понял обертывание?

UPDATE:

Более простой пример, который не работает:

$myBox.after($("<p></p>").wrap("<div></div>"));

Это добавит только DIV после myBox.

Похоже, что jQuery не любит добавление переноса после.

Answer 1

Просто наткнулся на этот поток с той же проблемой: jQuery .wrap () не работает

Я думаю, что если вы измените свой код с

$myDiv.after($divA.wrap($divB)) до $myDiv.after($divA.wrap($divB).parent())

вы получите свою обертку.

Answer 2

Вы пробовали

$myDiv.after($divA.wrap('<div class="divB"></div>'));

только для целей тестирования?

Насколько я понимаю, вы не должны передавать объект jQuery в функцию wrap:

Функция .wrap () может принимать любые строка или объект, который может быть передан к заводской функции $ (), чтобы указать структура DOM . Эта структура может быть вложенный в несколько уровней, но должен содержать только один внутренний элемент. структура будет обернута вокруг каждого элементов в наборе совпадающих элементы.

Если приведенный выше пример работает, то в этом причина; -)

Answer 3

Запутывающей частью могло быть для вас то, что .wrap() возвращает внутренний элемент, а не родительский элемент.

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

var $divA= $("<div/>").addClass('classA'),
    $divB= $("<div/>").addClass('classB');

$myDiv.after($divA.wrap($divB).parent());

($divA.parent() равно $divB после упаковки)

Таким образом, ключевая часть в том, что $divA.wrap($divB) возвращает $divA, НЕ $divB

см. Ссылку:

Этот метод возвращает исходный набор элементов для создания цепочки цели.

http://api.jquery.com/wrap/

Answer 4

Вы не ищете обертку. Вы хотите:

divB.append(divA).insertAfter('#myDiv');

Answer 5

Я получил это на работу:

$('div#myDiv').after("<div class='classA'></div>").end().find('.classA').wrap("<div class='classB'></div>");

с вашим HTML, чтобы решить ваш начальный вопрос. Здесь - источник функции завершения jQuery. Этот код заставит цепочку подняться на один уровень вверх (до уровня myDiv), а затем обернется на основе поиска ('. ClassA') на этом уровне. Это найдет ваш div с добавленным после и обернет его в div с classB.

Edit: Хорошо, я думаю, что это будет работать для вас так, как вы хотите:

var divA= $("<div></div>").addClass('classA');
$('div#myDiv').after($(divA).wrap('<div class="divB" />'));

Я думаю, что проблема заключалась в том, что при вызове wrap для divA это должен быть объект jQuery для корректной работы. Так что на самом деле все, чего вам не хватало - это обернуть divA в ().

Answer 6

Возможно, я неправильно это читаю, но если вы используете jQuery, не является ли символ $ зарезервированным? Вы пытались просто установить имена переменных, чтобы они не использовали их?

Если так:

var divA = $("<div></div>").addClass('classA');
divA.wrap("<div class=\"classB\"></div>");
divA.insertAfter($("#myDiv"));

или

divA.after($("#myDiv"));

Вот документация jQuery по этому вопросу.