javascriptは "commonAncestorContainer"のIDを取得します

私はここで私のリーグから少し外れているように感じます。しかしここに私がしたいことがあります。javascriptは "commonAncestorContainer"のIDを取得します

は基本的に、私はその段落のid属性の値を返すために（多くのelemnts（すなわち<span>と<a>を含んでいてもよい）段落に内のテキストのユーザーの選択部分を持っていると思います。ここで私は考えて何。

function getParaID() //function will be called using a mouseUp event 
{ 
var selObj = window.getSelection(); 
var selRange = selObj.getRangeAt(0); //btw can anyone explain what this zero means 
var paraElement = selRange.commonAncestorContainer; 
var paraID = paraElement.getAttribute; 

return paraID; 
}

あなたはどう思いますか、私は閉じてる

出典

2011-08-01 Jeff

動作しますか？ 'paraID'はおそらくあなたが望むものではない' getAttribute'関数への参照になります。 –

選択範囲のcommonAncestorContainerプロパティは、テキストノードへの参照、または<span>または<a>要素または<body>要素、または任意の他、あなたのページを持っていることかもしれません。その場合、含まれる<p>要素（存在する場合）を見つけるためにDOMツリーを処理する必要があります。また、IE < 9はwindow.getSelection()またはDOM Rangeをサポートしていないことに注意する必要がありますが、IEで非常に簡単に行うことは可能です。< 9。あなたがしたい範囲を選択したかを示すされgetRangeAt()に渡さ0、について

function getContainingP(node) { 
    while (node) { 
     if (node.nodeType == 1 && node.tagName.toLowerCase() == "p") { 
      return node; 
     } 
     node = node.parentNode; 
    } 
} 

function getParaID() { 
    var p; 
    if (window.getSelection) { 
     var selObj = window.getSelection(); 
     if (selObj.rangeCount > 0) { 
      var selRange = selObj.getRangeAt(0); 
      p = getContainingP(selRange.commonAncestorContainer); 
     } 
    } else if (document.selection && document.selection.type != "Control") { 
     p = getContainingP(document.selection.createRange().parentElement()); 
    } 
    return p ? p.id : null; 
}

：

jsFiddle：http://jsfiddle.net/44Juf/

コードここではIE 6を含むすべての主要なブラウザで動作するいくつかのコードです。 Firefoxは複数の選択範囲をサポートしています：選択をしてCtrlを押して別の選択をすると、getRangeAt(0)とgetRangeAt(1)でアクセスできる2つの不連続範囲が選択されています。また、Firefoxでは、テーブル内のセルの列を選択すると、選択したセルごとに別々の範囲が作成されます。選択範囲の数は、選択のrangeCountプロパティを使用して取得できます。他のメジャーブラウザは、複数の選択範囲をサポートしていません。

出典

2011-08-01 11:49:57

あなたは非常に近いです、あなたが望むすべてが親要素のidである場合、あなたは次のように、paraElement.idであなたのparaElement.getAttributeを交換する必要があります。？？。

var paraID = paraElement.id;

getRangeAt()のパラメータについては、返す選択範囲のインデックスを指定しています。不連続な選択を許可するコントロールにのみ関連します。例えば、ユーザがctrl + clickを使用して複数の行の任意のグループを同時に選択することができるselectボックス。このような場合、パラメータを使用して、選択された1つの領域から次の領域に進むことができます。ただし、段落内のテキストを強調表示する場合は、不連続な選択をしてはならないので、常に0を渡すことができます。本質的には、あなたが「最初の選択された地域」を求めていることを意味します。

また、ユーザーの選択が複数の段落にまたがる場合、commonAncestorContainerは段落ではない可能性があります。また、すべての段落タグが含まれている要素であってもかまいません。だからあなたはその事件に対処する用意があるべきです。

編集：に（このコードはmouseDown、各段落にmouseUpリスナーを適用する代わりにcommonAncestorContainerに頼るので、http://jsfiddle.net/vCsZH/

基本的には：

これでビットを再生した後、ここに私の提案ですすでにトップレベルコンテナに適用されているものに加えて）。リスナーは、本質的に選択範囲の開始と終了の段落を記録するので、どの段落が確実に選択されるかを簡単に確認できます。

jQueryのようなフレームワークを介して動的イベントバインディングを使用することが好都合だった場合は、これが該当します。

出典

2011-08-01 10:50:02 aroth

あなたは 'getRangeAt（）'の説明を少し残しています。 'window.getSelection（）'はフォーム要素ではなく、特に '

javascriptは "commonAncestorContainer"のIDを取得します

答えて