Verwendung von .text(), um nur Text abzurufen, der nicht in untergeordneten Tags verschachtelt ist

Question

Wenn ich so ein html habe:

<li id="listItem">
    This is some text
    <span id="firstSpan">First span text</span>
    <span id="secondSpan">Second span text</span>
</li>

Ich versuche, die .text() nur die Zeichenkette "This is some text" abzurufen, aber wenn ich sagen würde $('#list-item').text() erhalte ich "Dies ist ein TextErste Spanne TextZweite Spanne Text".

Gibt es eine Möglichkeit, über etwas wie .text("") ) nur den freien Text innerhalb eines Tags und nicht den Text innerhalb seiner untergeordneten Tags?

Das HTML wurde nicht von mir geschrieben, also ist es das, womit ich arbeiten muss. Ich weiß, dass es einfach wäre, den Text beim Schreiben der HTML-Datei in Tags einzuschließen, aber auch hier ist die HTML-Datei bereits geschrieben.

Answer 1

Ich mochte diese wiederverwendbare Implementierung auf der Grundlage des clone() Methode gefunden aquí um nur den Text innerhalb des übergeordneten Elements zu erhalten.

Der Code dient zur einfachen Bezugnahme:

$("#foo")
    .clone()    //clone the element
    .children() //select all the children
    .remove()   //remove all the children
    .end()  //again go back to selected element
    .text();

Answer 2

Einfache Antwort:

$("#listItem").contents().filter(function(){ 
  return this.nodeType == 3; 
})[0].nodeValue = "The text you want to replace with"

Answer 3

Dies scheint mir ein Fall von übermäßiger Verwendung von Jquery zu sein. Die folgenden wird der Text ignorieren die anderen Knoten greifen:

document.getElementById("listItem").childNodes[0];

Das müssen Sie zwar kürzen, aber damit haben Sie, was Sie wollen, in einer Zeile.

EDITAR

Die obigen Angaben erhalten die Textbaustein . Um den eigentlichen Text zu erhalten, verwenden Sie dies:

document.getElementById("listItem").childNodes[0].nodeValue;

Answer 4

Einfacher und schneller:

$("#listItem").contents().get(0).nodeValue

Answer 5

Ähnlich wie die akzeptierte Antwort, aber ohne Klonen:

$("#foo").contents().not($("#foo").children()).text();

Und hier ist ein jQuery-Plugin für diesen Zweck:

$.fn.immediateText = function() {
    return this.contents().not(this.children()).text();
};

Hier erfahren Sie, wie Sie dieses Plugin verwenden können:

$("#foo").immediateText(); // get the text without children