javascript Jquery replaceWith 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19506502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery replaceWith not working
提问by Conando
Using Jquery 1.7.1
使用 Jquery 1.7.1
I have two divs
我有两个div
<div class="highlightStart"></div>
{page content here}
<div class="highlightEnd"></div>
Those show up in the page source. But this jquery I added at the bottom of the page is not working:
那些显示在页面源代码中。但是我在页面底部添加的这个 jquery 不起作用：
<script type="text/javascript" id="makeHighlight">
$(document).ready(function () {
$("div.highlightStart").replaceWith("<section class='highlight'>");
$("div.highlightEnd").replaceWith("</section>");
});
</script>
No javascript errors showing in the browser console (Chrome). Just nothing gets replaced.
浏览器控制台 (Chrome) 中没有显示 javascript 错误。只是什么都没有被取代。
回答by Drixson Ose?a
First i want to site that you're a producing an incorrect structure of DOM. If your script will run it will looks like this:
首先，我想指出您正在生成不正确的 DOM 结构。如果您的脚本将运行，它将如下所示：
<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div>
and this is not a good structure if you want have:
如果您想要，这不是一个好的结构：
<section>
{page content here}
</section>
Should be something like this:
应该是这样的：
Your DOM:
你的 DOM：
<div id="content">
{page content here}
</div>
And in your script:
在你的脚本中：
$(document).ready(function () {
content = $('#content').text();
$('#content').html($('<section>').text(content));
});
Please see myfiddlefor reference
请参阅myfiddle以供参考
回答by Conando
Based on help from isherwood, used this as the solution:
基于isherwood的帮助，将其用作解决方案：
With HTML tree like this:
使用这样的 HTML 树：
<div><div><div class="highlightStart">highlightStart</div></div></div>
<div>Outside<div>Content to Highlight</div>More</div>
<div>second</div>
<div>third</div>
<div><div><div class="highlightEnd">highlightEnd</div></div></div>
This Javascript:
这个Javascript：
$(document).ready(function () {
$('.highlightStart').parent().parent().replaceWith("<div class='highlightStart'>");
$('.highlightEnd').parent().parent().replaceWith("<div class='highlightEnd'>");
$('.highlightStart').nextUntil('.highlightEnd').andSelf().wrapAll("<section class='highlight'>");
$('.highlightStart, .highlightEnd').remove();
});
回答by isherwood
The replaceWith method expects entire elements, not tags. You'll need to wrap your page contents with a new element, then remove the two original divs.
replaceWith 方法需要整个元素，而不是标签。您需要使用新元素包装页面内容，然后删除两个原始 div。
Update: This might get you close:
更新：这可能会让你接近：
$(document).ready(function () {
$('.highlightStart').nextUntil('.highlightEnd').andSelf()
.wrap('<section class="highlight"></section>');
$('.highlightStart, .hightlightEnd').remove();
});
http://jsfiddle.net/isherwood/H36UE
http://jsfiddle.net/isherwood/H36UE
Something's off a bit with this, but I'm out of time. Good luck.
这有点不对劲，但我没时间了。祝你好运。
