Javascript Jquery替换为不工作

使用jquery1.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>

$（文档）.ready（函数（）{
$（“div.highlightStart”）。替换为（“”）；
$（“高亮度分区”）。替换为（“”）；
});

---

浏览器控制台（Chrome）中没有显示javascript错误。没有任何内容被替换。

replaceWith方法需要整个元素，而不是标记。您需要使用新元素包装页面内容，然后删除两个原始div

更新：这可能会让你接近：

$(document).ready(function () {
   $('.highlightStart').nextUntil('.highlightEnd').andSelf()
       .wrap('<section class="highlight"></section>');

    $('.highlightStart, .hightlightEnd').remove();
});

$（文档）.ready（函数（）{
$（'.highlightStart'）.nextUntil（'.highlighted'）.andSelf（）
.wrap（“”）；
$（'.highlightStart，.hight拧紧'）.remove（）；
});

---

这有点不对劲，但我没时间了。祝你好运。

replaceWith方法需要整个元素，而不是标记。您需要使用新元素包装页面内容，然后删除两个原始div

更新：这可能会让你接近：

$(document).ready(function () {
   $('.highlightStart').nextUntil('.highlightEnd').andSelf()
       .wrap('<section class="highlight"></section>');

    $('.highlightStart, .hightlightEnd').remove();
});

$（文档）.ready（函数（）{
$（'.highlightStart'）.nextUntil（'.highlighted'）.andSelf（）
.wrap（“”）；
$（'.highlightStart，.hight拧紧'）.remove（）；
});

---

这有点不对劲，但我没时间了。祝你好运。

首先我想告诉你一个网站，你正在生成一个不正确的DOM结构。如果脚本将运行，它将如下所示：

<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div> 

{此处的页面内容}

如果你想拥有，这不是一个好的结构：

<section>
{page content here}
</section>

{此处的页面内容}

应该是这样的：

<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div> 

您的DOM：

<div id="content">
{page content here}
</div>

{此处的页面内容}

在你的剧本中：

$(document).ready(function () {
  content = $('#content').text();

  $('#content').html($('<section>').text(content));
});

$（文档）.ready（函数（）{
content=$（'#content'）.text（）；
$（'#content'）.html（$（''）.text（content））；
});

---

请参阅参考

首先，我想告诉您的站点，您正在生成不正确的DOM结构。如果脚本将运行，它将如下所示：

<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div> 

{此处的页面内容}

如果你想拥有，这不是一个好的结构：

<section>
{page content here}
</section>

{此处的页面内容}

应该是这样的：

<div class="highlightStart"><section></div>
{page content here}
<div class="highlightEnd"></section></div> 

您的DOM：

<div id="content">
{page content here}
</div>

{此处的页面内容}

在你的剧本中：

$(document).ready(function () {
  content = $('#content').text();

  $('#content').html($('<section>').text(content));
});

$（文档）.ready（函数（）{
content=$（'#content'）.text（）；
$（'#content'）.html（$（''）.text（content））；
});

---

请参见参考

基于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>

highlightStart
Outside Content to HighlightMore
第二
第三
强光

此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();
});

$（文档）.ready（函数（）{
$（'.highlightStart'）.parent（）.parent（）.replacetwith（“”）；
$（'.highlighted'）.parent（）.parent（）.replacetwith（“”）；
$（'.highlightStart'）.nextUntil（'.highlighted'）.andSelf（）.wrapAll（“”）；
$（'.highlightStart，.highlighted'）.remove（）；
});

基于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>

highlightStart
Outside Content to HighlightMore
第二
第三
强光

此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();
});

$（文档）.ready（函数（）{
$（'.highlightStart'）.parent（）.parent（）.replacetwith（“”）；
$（'.highlighted'）.parent（）.parent（）.replacetwith（“”）；
$（'.highlightStart'）.nextUntil（'.highlighted'）.andSelf（）.wrapAll（“”）；
$（'.highlightStart，.highlighted'）.remove（）；
});

我觉得还可以。这在其他浏览器上有效吗？真的吗？“看起来还可以”吗？我忍不住觉得元素节点和字符串之间存在着一个根本性的误解。你能在页面内容周围用一个div开头，它是另外两个的兄弟吗？那会让生活变得简单，我觉得还可以。这在其他浏览器上有效吗？真的吗？“看起来还可以”吗？我忍不住觉得元素节点和字符串之间存在着一个根本性的误解。你能在页面内容周围用一个div开头，它是另外两个的兄弟吗？我的理解是，您描述的是html（）而不是replaceWith（）；html（）替换标记之间的内容；替换为替换元素。这是我从StackOverflow帖子中得到的：我的理解是，您所描述的是html（）而不是replaceWith（）；html（）替换标记之间的内容；替换为替换元素。这是我从StackOverflow post得到的消息：谢谢你的Isherwood！在JQuery文档中，is说replaceWith可以接受HTML字符串（以及元素、数组或JQuery）。我所使用的似乎符合HTML字符串的定义：。问题似乎是JQuery将自动完成标记到元素中，因此您不能单独插入开始标记和结束标记（它似乎忽略了结束标记）。但是，这只适用于按预期插入文本：很好。谢谢。这就是我最后使用的，紧跟着你的例子。示例HTML更详细地显示了客户端站点中树的结构：。非常感谢你的帮助！谢谢你的伊舍伍德！在JQuery文档中，is说replaceWith可以接受HTML字符串（以及元素、数组或JQuery）。我所使用的似乎符合HTML字符串的定义：。问题似乎是JQuery将自动完成标记到元素中，因此您不能单独插入开始标记和结束标记（它似乎忽略了结束标记）。但是，这只适用于按预期插入文本：很好。谢谢。这就是我最后使用的，紧跟着你的例子。示例HTML更详细地显示了客户端站点中树的结构：。非常感谢你的帮助！