0

私は DOM オブジェクトを持っています。例えば、任意の子を持つ div があります。マークされた要素の前と後の 2 つの部分に正しく分割する必要があります。例：

<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 トラバーサル メソッドでは無視されます。テキスト文字列を分割するには、それを手動で解析する必要があります (または、より意味のある場所にマーカーを挿入するだけです)。このデモは目的に非常に近いはずですが、マーカーと同じレベルのテキストは分割されません。

$(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 />");
});​

 jsフィドル

于 2012-09-22T10:41:34.943 に答える