Как поддерживать ссылку jQuery с помощью replaceWith

если у нас есть пример структуры такой:

HTML-код

<div id="foo">hello foo</div>

JS

var $foo = $('#foo');

и нам нужно заменить всю разметку HTML для этой ссылки jQuery / node, используя jQuery .replaceWith метод какова наилучшая практика для поддержания соответственно получить новую ссылку на узел ?

проблемы .replaceWith возвращает ссылку на элемент старый объект jQuery (который звучит более или менее разумно). Из документов:

однако следует отметить, что возвращается исходный объект jQuery. Этот объект ссылается на элемент, который был удален из DOM, не новый элемент, который его заменил.

если я пойду как

$foo = $foo.replaceWith('<div>new content</div>');

Я хотел бы, чтобы этот новый узел ссылался/кэшировался в той же переменной. Да, вы можете повторно запросить этот недавно вставленный узел DOM, но это кажется очень неуклюжим в моем разум.

есть ли какой-либо сложный способ достичь этого без необходимости повторного запроса DOM ?

пример:http://jsfiddle.net/Lm7GZ/1/

3 ответов


использовать .replaceAll() функция:

$foo = $('<div>new content</div>').replaceAll($foo);

можно использовать replaceAll(), замена источника на цель:

$foo = $('<div>new content</div>').replaceAll($foo);

мы можем использовать любой из следующих способов:

$foo = $('<div id="foo">hello foo</div>').replaceAll('#foo'); //As a target string;

или

$foo = $('#foo');
$foo = $('<div id="foo">hello foo</div>').replaceAll($foo); //As a jQuery Object;

также мы можем сделать цепные запросы:

$('<div id="foo">hello foo</div>').replaceAll('#foo').find('something into the newly added html')......