jQuery InnerText sin incluir elemento sub

Question

Im preguntándose cómo iba a obtener el texto de un elemento de la lista anidada sin obtener el texto de sus hijos es decir

<ul> 
    <li id="node"> 
     I want this 
    <ul> 
     <li> 
      I dont want this 
     </li> 
    </ul> 
    </li> 
</ul> 

Ahora, utilizando jQuery con $ ('# nodo'). Texto() me da todo el texto, mientras que solo quiero la cadena "Quiero esto".

Cualquier ayuda apreciada.

Cheers, Chris.

Answer 1

Hay una Text Children Plugin para esto, si es algo que usted quiere hacer a menudo. Te ofrece algunas opciones para la salida también.

Answer 2

A continuación le conseguirá una cadena concatenada de todos los nodos de texto que son hijos directos de un nodo:

function getChildText(node) { 
    var text = ""; 
    for (var child = node.firstChild; !!child; child = child.nextSibling) { 
    if (child.nodeType === 3) { 
     text += child.nodeValue; 
    } 
    } 
    return text; 
} 

alert(getChildText(document.getElementById("node"))); 

Answer 3

La solución de Tim funcionará. Si su margen de beneficio es siempre fija en ese formato y sólo necesita leer ese primer tramo de texto hasta el elemento secundario, incluso se podría continuar con sólo:

node.firstChild.data 

Answer 4

En este ejemplo se utiliza .contents() para obtener todos los niños nodos (incluidos los nodos de texto), luego usa .map() para convertir cada nodo secundario en una cadena basada en el nodeType. Si el nodo es un nodo de texto (es decir, texto que no está dentro del <li>), devolvemos su nodeValue.

Esto devuelve un conjunto de jQuery que contiene cadenas, por lo que llamamos al .get() para obtener un objeto de matriz 'estándar' al que podemos llamar .join().

// our 'div' that contains your code: 
var $html = $('<li id="node">I want this<ul><li>I dont want this</li></ul> </li>'); 

// Map the contents() into strings 
$html.contents().map(function() { 
    // if the node is a textNode, use its nodeValue, otherwise empty string 
    return this.nodeType == 3 ? this.nodeValue : undefined; 
    // get the array, and join it together: 
}).get().join(''); 

// "I want this " -- note the extra whitespace from after the <ul> 

y hacer una llamada simple:

$.fn.directText=function(delim) { 
    if (!delim) delim = ''; 
    return this.contents().map(function() { return this.nodeType == 3 ? this.nodeValue : undefined}).get().join(delim); 
}; 

$html.directText(); 
// "I want this " 

O una versión ligeramente más robusto para permitir el recorte de los espacios en blanco/cambiar la cadena de unión:

$.fn.directText = function(settings) { 
    settings = $.extend({},$.fn.directText.defaults, settings); 
    return this.contents().map(function() { 
    if (this.nodeType != 3) return undefined; // remove non-text nodes 
    var value = this.nodeValue; 
    if (settings.trim) value = $.trim(value); 
    if (!value.length) return undefined; // remove zero-length text nodes 
    return value; 
    }).get().join(settings.joinText); 
}; 

$.fn.directText.defaults = { 
    trim: true, 
    joinText: '' 
};