filter() nach innerem Text gibt leere Elternknoten zurück

Question

Ich muss alle Elemente auf der Seite finden, die einem inneren Text entsprechen:

$("body *:visible").filter( function(){ return $(this).text() == 'jQuery' } );

Allerdings erhalte ich in einigen Fällen übergeordnete Knoten mit vernetzten Elementen.
z.B.
1. Spiel: <li><a href="#">Jquery</a></li>
2. Spiel: <a href="#">Jquery</a>

Wie kann ich alle Elemente mit übergeordneten Knoten aus der Auswahl entfernen und nur die Elemente übrig lassen, die tatsächlich definierten inneren Text enthalten?

Für den Test können Sie versuchen, das obige Skript auszuführen auf jquery.de

Answer 1

Dieser Code durchläuft nur die Textknoten dieses Elements und führt dann den Vergleich durch.

$("body *:visible").filter(function() {

    var childNodes = this.childNodes,
        text = '';

    $.each(childNodes, function(i, node) {
        if (node.nodeType != 3) {
            return true;
        }
        text += node.data;
    });

    return text == 'jQuery';

});

jsFiddle .

Wenn Sie eine Suche ohne Berücksichtigung der Groß- und Kleinschreibung durchführen möchten, müssen Sie außerdem die Option toLowerCase() auf den Textknoten vor dem Vergleich mit der Kleinbuchstabenversion der übereinstimmenden Zeichenfolge.

Answer 2

Ihre Logik versagt, denn Sie vergleichen .text() Werte. Dadurch wird die gesamte HTML-Auszeichnung entfernt, auch die der Kind-Knoten. Wenn Sie Elemente wünschen, die keine untergeordneten Elemente enthalten und mit diesem Text übereinstimmen, ändern Sie ihn einfach in:

 $("body *:visible").filter( function(){ return $(this).html().toLowerCase() == 'jquery'  });

Allerdings ist dies ein ziemlich böser Filter, der vermutlich ziemlich langsam ist.

Answer 3

Das liegt daran, dass text() gibt den inneren Text des Elements zurück, der den inneren Text aller seiner Nachkommen einschließt.

Sie müssen Folgendes verwenden Inhalt() um nur die unmittelbaren Kinderelemente und Textknoten abzugleichen:

$("body *:visible").filter(function() {
    var textNodes = $(this).contents().filter(function() {
        return this.nodeType == 3;
    });
    return (textNodes.length > 0 && textNodes[0].nodeValue == "jQuery");
});