[英]Jquery replaceWith not working
使用Jquery 1.7.1
我有两个div
<div class="highlightStart"></div>
{page content here}
<div class="highlightEnd"></div>
那些显示在页面源中。 但是我在页面底部添加的这个jquery不起作用:
<script type="text/javascript" id="makeHighlight">
$(document).ready(function () {
$("div.highlightStart").replaceWith("<section class='highlight'>");
$("div.highlightEnd").replaceWith("</section>");
});
</script>
浏览器控制台(Chrome)中没有显示javascript错误。 什么都没有被取代。
首先,我想站点,你是一个产生不正确的DOM结构。 如果您的脚本将运行,它将如下所示:
<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div>
如果你想要的话,这不是一个好的结构:
<section>
{page content here}
</section>
应该是这样的:
你的DOM:
<div id="content">
{page content here}
</div>
在你的脚本中:
$(document).ready(function () {
content = $('#content').text();
$('#content').html($('<section>').text(content));
});
请参阅我的小提琴以供参考
replaceWith方法需要整个元素,而不是标记。 您需要使用新元素包装页面内容,然后删除两个原始div。
更新:这可能会让你接近:
$(document).ready(function () {
$('.highlightStart').nextUntil('.highlightEnd').andSelf()
.wrap('<section class="highlight"></section>');
$('.highlightStart, .hightlightEnd').remove();
});
http://jsfiddle.net/isherwood/H36UE
有点不对劲,但我没时间了。 祝好运。
根据isherwood的帮助,使用此作为解决方案:
使用这样的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>
这个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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.