Как уберечь jQuery от синтаксического анализа вставленного HTML?
Кто-нибудь знает, как остановить jQuery от синтаксического анализа html, который вы вставляете до () и после ()? Скажем, у меня есть элемент:
<div id='contentdiv'>bla content bla</div>
и я хочу обернуть его следующим образом:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
Я использую следующий jQuery / Javascript
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
$(this).before(beforeHTML);
$(this).after(afterHTML);
}
Однако это не приведет к правильной упаковке, она создаст:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
</div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
Использование wrap () также не сработает, поскольку это еще больше запутывает jQuery при использовании:
$(this).wrap("<div id='wrapperDiv'><div id='beforeDiv'></div><div id='afterDiv'></div></div>");
Как мне решить эту проблему? Заранее спасибо!
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
ваша разметка не завершена ... до и после нужно брать только полные узлы ...
то, что вы пытаетесь сделать, - это сворачивать вашего контента, а это другое.
Вы хотите это:
.wrap (HTML);
http://docs.jquery.com/Manipulation/wrap#html
Извините, но это должно быть очевидно. В вашем случае вы не можете использовать перенос, потому что он вставляет исходный узел в самый глубокий узел, который он находит в оборачивающем HTML. Вы этого не хотите. Вместо этого прочтите HTML-код своего объекта и объедините его с тем, что у вас есть:
$('#contentDiv').each( function() {
var beforeHTML = "<div id='wrapperDiv'><div id='beforeDiv'></div>";
var afterHTML = "<div id='afterDiv'></div></div>";
// This line below will do it...
$(this).html(beforeHTML + $(this).html() + afterHTML);
}
Lol, большое спасибо, это почти идеально (не на 100% идеально, так как он держит div на месте, но я могу обойти это. Спасибо)
Я думаю, вы ошибаетесь. Подумайте о том, чего вы действительно хотите достичь ...
Вы хотите обернуть все одним div. Затем вставьте 1 div до и 1 div после.
так что сначала сделайте .wrap (), затем добавьте до и после div относительно content-div.
если у вас есть фактический HTML в виде строки (из XHR или чего-то еще), вам нужно прочитать html и объединить его самостоятельно, как предложил Дуглас Мейл.
$('#contentDiv').each(function() {
$(this).wrap('<div id = "wrapperDiv">');
$(this).before('<div id = "beforeDiv">');
$(this).after('<div id = "afterDiv">');
});
производит:
<div id='wrapperDiv'>
<div id='beforeDiv'></div>
<div id='contentDiv'>bla content bla</div>
<div id='afterDiv'></div>
</div>
Да, я упустил из виду, что у вас не было «самого глубокого узла», хотя метод wrap () по-прежнему является ключевым.
извините, я забыл сказать, обертка дает еще более странные результаты.