Wie kann ich mit jQuery Elemente nach Textinhalt finden?

Lesezeit: 4 Minuten

Benutzer-Avatar
Sisko

Kann mir jemand sagen, ob es möglich ist, ein Element anhand seines Inhalts und nicht anhand einer ICH WÜRDE oder Klasse?

Ich versuche, Elemente zu finden, die keine eindeutigen Klassen oder IDs haben. (Dann muss ich dann das übergeordnete Element dieses Elements finden.)

  • api.jquery.com/category/selectors

    – Felix Klinge

    6. September 2011 um 14:56 Uhr

  • Mögliches Duplikat von Wie wähle ich mit jquery eine Spanne aus, die einen bestimmten Textwert enthält?

    – AncientSwordRage

    9. August 2017 um 9:46 Uhr

Benutzer-Avatar
Raketen-Hazmat

Du kannst den … benutzen :contains Selektor, um Elemente basierend auf ihrem Inhalt zu erhalten.

Demo hier

$('div:contains("test")').css('background-color', 'red');
<div>This is a test</div>
<div>Another Div</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  • Toll, aber es wird zwischen Groß- und Kleinschreibung unterschieden. Können wir trotzdem eine Suche ohne Berücksichtigung der Groß-/Kleinschreibung durchführen?

    – Dipu Raj

    4. April 2012 um 9:36 Uhr

  • @DipuRaj: Sie müssten verwenden .filter stattdessen. $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})

    – Raketen-Hazmat

    4. April 2012 um 13:06 Uhr


  • Ja, bitte nutzen Sie den Ansatz @RocketHazmat verwendet, sagen wir, Sie haben alle 5 Elemente mit vorangestelltem ‘Vertrag registrieren’ und jeder hat ein Nummernsuffix. Du wirst enden sie alle auswählenwenn Sie in Wirklichkeit nur das Element mit Text wollen: ‘Vertrag 26 registrieren’.

    – Riveascore

    14. Oktober 2014 um 16:45 Uhr


  • Obwohl bei :contains zwischen Groß- und Kleinschreibung unterschieden wird, hat es bei mir funktioniert, weil ich die genaue zu findende Textzeichenfolge übergeben habe.

    – Francisco Quintero

    6. Juli 2015 um 15:26 Uhr

  • Falls es jemand anderem hilft, der gerne Leerzeichen in seinen Eltern verwendet, tut das Folgende nicht Arbeit: $('div:contains( "test" )').css('background-color', 'red');

    – M Katz

    31. März 2020 um 5:18 Uhr

Benutzer-Avatar
yoav barnea

In der jQuery-Dokumentation heißt es:

Der übereinstimmende Text kann direkt innerhalb des ausgewählten Elements, in einem beliebigen Nachfolger dieses Elements oder in einer Kombination davon erscheinen

Daher reicht es nicht aus, dass Sie es verwenden :contains() Wählermüssen Sie auch überprüfen, ob der Text, nach dem Sie suchen, der ist direkter Inhalt des Elements, auf das Sie abzielen, etwa so:

function findElementByText(text) {
    var jSpot = $("b:contains(" + text + ")")
                .filter(function() { return $(this).children().length === 0;})
                .parent();  // because you asked the parent of that element

    return jSpot;
}

  • Diese Lösung kann im folgenden Szenario fehlschlagen: <li>Hello <a href='#'>World</a>, How Are You. . Hier wenn How gesucht wird die Bedingung wird glaube ich scheitern.

    – me_digvijay

    25. September 2017 um 18:59 Uhr

Jungs, ich weiß, das ist alt, aber hey, ich habe diese Lösung, die meiner Meinung nach besser funktioniert als alle anderen. Überwindet in erster Linie die Groß-/Kleinschreibung, mit der jquery :contains() ausgeliefert wird:

var text = "text";

var search = $( "ul li label" ).filter( function ()
{
    return $( this ).text().toLowerCase().indexOf( text.toLowerCase() ) >= 0;
}).first(); // Returns the first element that matches the text. You can return the last one with .last()

Hoffe, jemand in naher Zukunft findet es hilfreich.

Benutzer-Avatar
Terry Lin

Rockets Antwort funktioniert nicht.

<div>hhhhhh
<div>This is a test</div>
<div>Another Div</div>
</div>

Ich habe seine einfach modifiziert DEMO hier und Sie können sehen, dass das Root-DOM ausgewählt ist.

$('div:contains("test"):last').css('background-color', 'red');

hinzufügen “:letzte” Selektor im Code, um dies zu beheben.

Benutzer-Avatar
Nikolaus Suschkin

Die folgende jQuery wählt div-Knoten aus, die Text enthalten, aber keine untergeordneten Elemente haben, die die Blattknoten des DOM-Baums sind.

$('div:contains("test"):not(:has(*))').css('background-color', 'red');
<div>div1
<div>This is a test, nested in div1</div>
<div>Nested in div1<div>
</div>
<div>div2 test
<div>This is another test, nested in div2</div>
<div>Nested in div2</div>
</div>
<div>
div3
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  • Das ist die beste Antwort!

    – Calciol

    10. Oktober 2019 um 11:48 Uhr

Meiner Meinung nach der beste Weg.

$.fn.findByContentText = function (text) {
    return $(this).contents().filter(function () {
        return $(this).text().trim() == text.trim();
    });
};

  • Das ist die beste Antwort!

    – Calciol

    10. Oktober 2019 um 11:48 Uhr

Benutzer-Avatar
Alex Turpin

Ja, verwenden Sie die jQuery contains Wähler.

  • äh, nein nicht: ‘enthält:’ stimmt nicht genau überein, nur ob die Nadel im Heuhaufen enthalten ist (daher der Name) … wie andere hier gesagt haben

    – Mike Nagetier

    21. März 2015 um 16:50 Uhr

  • Dies ist keine Antwort.

    – lharbi

    12. Oktober 2016 um 15:51 Uhr

1011690cookie-checkWie kann ich mit jQuery Elemente nach Textinhalt finden?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy