Trouver le textNode que le curseur est actuellement sur

Question

Disons que je suit ...

<div id="text">Some text</div>

Lorsque ma souris passe au-dessus Some, Some sera retourné et même avec text. Est-ce possible sans mettre chaque nœud dans son propre élément?

Answer 1

C'est à peu près impossible. Puisque dans Javascript vous savez juste que vous planez sur un element (div et/ou un textnode dans ce cas), vous ne pouvez pas savoir quel mot est plané comme cela.

Peut-être avec beaucoup d'efforts et de quelques hacks geeks sur offsets et/ou event.pageX/Y, mais je pencherais pour la solution que vous vous avez mentionné, envelopper chaque mot dans son propre element.

var $text = $('#text'); 
$text.html($text.text().replace(/\b(\w+)\b/g, "<span class='word'>$1</span>")); 

$('.word').bind('mouseenter', function(e){ 
    alert($(this).text()); 
}); 

Answer 2

Cela est impossible sans que ni envelopper les deux noeuds dans des éléments ou déterminer en quelque sorte la position exacte des noeuds de texte et obligatoire puis à l'événement click de certains parents. L'ancienne option est plus simple. Il suffit de les envelopper dans des portées:

<div id="text"><span>Some<span> <span>text</span></div> 

Ou, si vous avez besoin de les envelopper tous automatiquement:

jQuery.fn.getTextNodes = function(){ 
    return this.not('script').contents().map(function(){ 
     var n = this.nodeType; 
     return n === 3 ? this : n === 1 ? jQuery(this).getTextNodes().get() : []; 
    }); 
}; 

jQuery('#text').getTextNodes().replaceWith(function(){ 
    return jQuery(this.data.replace(/\S+/g, '<span>$&</span>')).filter('span').click(function(){ 
     alert('You just clicked on the word: ' + jQuery.text([this])); 
    }).end(); 
});​ ​ 

Démo: http://jsfiddle.net/PYKqM/