JQuery innerText nie w tym sub elementu

Question

Im zastanawiasz się, w jaki sposób uzyskać tekst zagnieżdżonego elementu listy bez uzyskiwania tekst jej dzieci tj

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

Teraz za pomocą jQuery z $ („# węzła”). Tekstu() pobiera mi cały tekst, gdzie jak chcę tylko ciąg "chcę tego".

Każda pomoc doceniona.

Pozdrawiam, Chris.

Answer 1

Jest Text Children Plugin na to, czy jest to coś będziemy chcieli często. Oferuje również kilka opcji wyjścia.

Answer 2

Poniższa będzie Ci łączone ciąg wszystkich węzłów tekstowych, które są bezpośrednimi dzieci węzła:

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

Rozwiązanie Tim będzie działać. Jeśli znaczników jest zawsze stała w tym formacie i trzeba tylko przeczytać, że pierwszy odcinek tekst aż do elementu podrzędnego, można nawet uciec z po prostu:

node.firstChild.data 

Answer 4

tym przykładzie użyto .contents() aby wszystkie dzieci węzły (w tym węzły tekstowe), a następnie używa .map(), aby przekształcić każdy węzeł podrzędny w ciąg znaków na podstawie nodeType. Jeśli węzeł jest węzłem tekstowym (tj. Tekstem nie mieszczącym się w zakresie <li>), zwracamy jego numer nodeValue.

Zwraca zestaw jQuery zawierający ciągi znaków, dlatego wywołujemy .get(), aby uzyskać "standardowy" obiekt tablicy, który możemy nazwać .join() na.

// 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> 

I aby prostszy połączenia:

$.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 " 

lub nieco bardziej wytrzymałe wykonanie, aby umożliwić przycinanie spacje/wymiana łańcuch łączący:

$.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: '' 
};