Блог

У меня есть picture переменная, которая указывает на <img> элемент в моем дереве документов. Я хочу обернуть с помощью <span> тега. Когда я делаю это с помощью простых функций DOM, все работает по желанию:

 var container = document.createElement("span");
container.style.border = "1em solid red";
container.innerHTML = "Container";
picture.parentNode.appendChild(container);
container.appendChild(picture);
container.style.borderColor = "green"; // Result: green on screen
  

Более конкретно, container указывает на один-единственный <span> . Но когда я делаю это с помощью метода wrap() jQuery:

 var container = $("<span></span>")
    .css({border: "1em solid red"})
    .text("Container");
container.css({borderColor: "yellow"}); // Result: yellow on screen
$(picture).wrap(container);
container.css({borderColor: "green"});
  

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

Существует ли элегантный способ jQuerish обернуть один <img> тег заданным <span> и сохранить ссылку на такой <span> для дальнейшего использования?

Это должно сделать это:

 var picWrapper = $(picture).wrap(container).parent();
  

Как только вы его обернете в span , span элемент станет его новым родительским элементом.