2011-08-27 19 views
14

È possibile ottenere l'elemento padre di un testo selezionato nella pagina? Per esempio:Ottieni elemento principale di un testo selezionato

<div class="someparent"> 

Selection of this text should refer to the 'someparent' class. 

<span class="spanparent">If this is selected, the parent should be this span</span> 

</div> 

Perché quando ricevendo il testo selezionato, si ottiene normalmente dalla finestra o il documento (a seconda del browser), ma è possibile che possibile ottenere l'elemento principale del testo selezionato?

+0

Puoi riformulare questo. Non riesco a mettere le mani su di cui hai bisogno. – Sgoettschkes

+1

Se si desidera ottenere il div someparent quando è selezionato il testo all'interno di spanparent, è possibile utilizzare $ ('span.spanparent'). Select (function() {$ (this) .parent(); ...}); – Sgoettschkes

+0

@Boo: Questa dovrebbe essere una risposta :) –

risposta

30

Ecco una funzione che consente di ottenere l'elemento più interno che contiene l'intera selezione dell'utente in tutti i principali browser (tranne quando sono selezionati più intervalli, che è supportato solo in Firefox.Se questo è importante, posso espandere il ad esempio a che fare con questo caso troppo):

function getSelectionParentElement() { 
    var parentEl = null, sel; 
    if (window.getSelection) { 
     sel = window.getSelection(); 
     if (sel.rangeCount) { 
      parentEl = sel.getRangeAt(0).commonAncestorContainer; 
      if (parentEl.nodeType != 1) { 
       parentEl = parentEl.parentNode; 
      } 
     } 
    } else if ((sel = document.selection) && sel.type != "Control") { 
     parentEl = sel.createRange().parentElement(); 
    } 
    return parentEl; 
} 
+0

SUPPORTO I SELEZIONATO IL TESTO DA DIFFERTO NODO DI COME OTTENERE TUTTI I GENITORI ?? – Ravi

+0

Come ottenere l'id di parent se l'elemento è span – Ravi

+0

solo per completare la risposta, 'parentEl.tagName' fornisce il tag che lo contiene. –

5

io suggerirei di usare questo

window.getSelection().anchorNode.parentElement 

ho testato in safari osx 10.9

+0

-1, quando viene effettuata la selezione, molti nodi possono essere selezionati insieme e anchorNode o focusNode possono essere più alti nella struttura DOM (a seconda della direzione e della lunghezza della selezione). Si dovrebbe ottenere un genitore che copre sia anchorNode che focusNode. –

Problemi correlati