0

我有一个 DOM 对象，例如带有任何孩子的 div。我需要将它正确地细分为两部分：标记元素之前和之后。例子：

<div>
  <p>para 1</p>
  <a href="#">Some text here
     <b>Bold<em>Italic <span id="marker"></span> </em> any other text</b>
     <p>Cool para 2</p>
  </a>
  <span>Bla-bla</span>
</div>

结果应该是这样的：

<div>
  <p>para 1</p>
  <a href="#">Some text here
     <b>Bold<em>Italic</em></b>
  </a>
</div>

<span id="marker"></span>

<div>
  <a href="#">
     <b><em>text</em> any other text</b>
     <p>Cool para 2</p>
  </a>
  <span>Bla-bla</span>
</div>

如您所见，所有标签都正确关闭，正确链接等。我看到的方式是克隆 DOM 节点，在第一个节点及其克隆之间插入标记，删除第一个节点中的右元素和克隆节点中的左元素。但是怎么做我不知道。所以我需要一个纯 JS 或 JQuery 中的示例或函数。

4

1 回答 1

1

文本节点不被视为兄弟节点，因此被 jQuery DOM 遍历方法忽略。要拆分文本字符串，您必须手动解析（或简单地将标记插入更有意义的位置）。这个demo应该和你想要的很接近，但是和marker同层的文字不会被分割。

$(document).ready( function() {
    var $contentDiv = $('div');
    var $prev = $contentDiv.clone();
    $prev.find("#marker").parentsUntil('div').andSelf().nextAll().remove();
    $prev.find("#marker").parentsUntil('div').andSelf().prevAll();
    $prev.find("#marker").remove();

    var $next = $contentDiv.clone();
    $next.find("#marker").parentsUntil('div').andSelf().prevAll().remove();
    $next.find("#marker").parentsUntil('div').andSelf().nextAll();
    $next.find("#marker").remove();

    $contentDiv.after($next);
    $contentDiv.after("<hr />");
    $contentDiv.after($prev);
    $contentDiv.after("<hr />");
});​

 jsFiddle

于 2012-09-22T10:41:34.943 回答