如何細分div與子節點到部分

我有一個DOM對象，例如與任何孩子的div。我需要將它正確地分爲兩部分：標記元素之前和之後。例子：如何細分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的例子或函數。

來源

2012-09-22 Stan Semenoff

我能找到一個標誌，它的所有的容器，這樣我就可以之前和之後刪除所有兄弟節點，但它的任務的一半。我需要在標記跨度之前或之後移除純文本。 –

文本節點不被視爲兄弟，所以被jQuery DOM遍歷方法忽略。要分割文本字符串，您必須手動解析（或者將標記插入更有意義的位置）。這demo應該非常接近你想要的，但與標記在同一水平上的文本不會被分割。

$(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-22 10:41:34 nbrooks

如何細分div與子節點到部分

回答

相關問題