2009-10-17 5 views

Répondre

7

Si vous voulez dire que vous voulez sélectionner le nœud de texte directement, il est conseillé de ne pas utiliser jQuery. Pour clarifier, obtenir un ensemble de nœuds de texte n'est pas un problème, mais les commandes de chaînage sur un ensemble de nœuds de texte ont des résultats imprévisibles ou ne fonctionnent pas avec la plupart des commandes car ils attendent l'ensemble enveloppé.

Vous pouvez le faire en filtrant les enfants d'un parent pour renvoyer uniquement les nœuds de texte, par exemple nodeType === 3 mais si votre question concerne la manipulation du texte, récupérez l'élément parent et manipulez le contenu du texte. Par exemple,

$('#parentElement').html(); // html of parent element 

$('#parentElement').text(); // text content of parent element and any descendents 

$('#parentElement').contents(); // get all child nodes of parent element 

Si vous voulez obtenir les nœuds de texte, ce qui suit est une façon

$('#parentElement').contents().filter(function() { return this.nodeType === 3 }); 

Ou vous pouvez regarder Karl Swedberg's Text Children plugin, qui offre diverses options différentes aussi.

EDIT:

En réponse à votre commentaire, une façon de travailler avec les nœuds de texte dans un ensemble enveloppé est de convertir l'objet jQuery à un tableau, puis travailler avec le tableau. Par exemple,

// get an array of the immediate childe text nodes 
var textArray = $('#parentElement') 
        .contents() 
        .filter(function() { return this.nodeType === 3 }) 
        .get(); 

// alerts the text content of each text node 
$.each(textArray, function() { 
    alert(this.textContent); 
}); 

// returns an array of the text content of the text nodes 
// N.B. Remember the differences in how different 
// browsers treat whitespace in the DOM 
textArray = $.map(textArray, function(e) { 
    var text = $.trim(e.textContent.replace(/\n/g, "")); 
    return (text)? text : null; 
}); 
+0

je suis d'accord c'est la meilleure solution, en sélectionnant des nœuds de texte. Le problème est ... comment pouvez-vous parcourir tous les nœuds de texte? var textes = $ ('# parentElement'). Contents(). Filter (fonction() {return this.nodeType === 3}); texts.each ?? – g2g23g

+0

Je vais mettre à jour ma réponse pour inclure un exemple de la façon de faire cela –

+0

aussi, est-il possible de sélectionner un nœud de texte en utilisant XPath? ça pourrait être plus facile d'utiliser xpath. – g2g23g

-1

Essayez this

$("div:contains('Beer')").css("text-decoration", "underline"); 
+0

Il ne l'a pas contenu dans un 'div' et d'ailleurs, si c'était qui soulignerait tout le contenu de ce div, pas seulement Beer – Mottie

0

Eh bien, il doit être entouré par quelque chose, même si c'est juste la balise <body>. Si vous aviez un document HTML avec juste ce qui est écrit dedans, je pense que le navigateur implicitement mettrait un <body> dans le DOM pour vous.

Cela dit, jetez un oeil à ceci:

How do I select text nodes with jQuery?

1

Personnellement, je les envelopper dans un <span> alors vous pouvez les consulter plus facilement. J'utilise le filtre de Russ Cam, si des accessoires (et +1) pour lui

$(document).ready(function(){ 
$('body').contents().filter(function(){ return this.nodeType === 3 }).each(function(){ 
    $(this).wrap('<span class="text"></span>'); 
}) 
}) 

Ensuite, vous pouvez simplement utiliser $('.text') et sélecteurs pour y accéder plus facilement.

0

Que diriez-vous d'un petit changement DOM?Tout d'abord sélectionner des noeuds, qui contiennent la chaîne désiré, que exécuter une fonction, qui remplace toutes les occurrences de « string » avec « string »

Nous avons besoin d'aucun plug-ins externes pour ce

<div> 
    Vodka <br /> 
    Rum <br /> 
    Whiskey<br /> 
</div> 

<script type="text/javascript"> 
$(function(){ 
    $.fn.replaceText = function(txt){ 
     var reg = new RegExp(txt, 'g'); 
     var strWith = '<span class="selected">' + txt + '</span>'; 
     var rep = this.html().replace(reg, strWith); 
     this.html(rep); 
     return $("span", this); 
    }; 
    $("div:contains('Vodka')").replaceText('Vodka').css('textDecoration', 'underline'); 
}); 
</script> 

J'ai créé ce script très vite, alors ne jugez pas sévèrement :) (et il est 2:28 AM :-D)

0

Il me semble que votre texte devrait être une liste (ol/ul). Ceci te donnerait alors quelques crochets sémantiques pour jQuery et rendrait les choses beaucoup plus faciles.

Questions connexes