it-swarm.com.de

jQuery: Element anhand von Text suchen

Kann mir jemand sagen, ob es möglich ist, ein Element anhand seines Inhalts zu finden, anstatt anhand eines id oder class?

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

280
sisko

Sie können den Selektor :contains verwenden, um Elemente basierend auf ihrem Inhalt abzurufen.

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>_
392
Rocket Hazmat

In der jQuery-Dokumentation heißt es:

Der übereinstimmende Text kann direkt im ausgewählten Element, in den Nachkommen des Elements oder in einer Kombination angezeigt werden

Daher ist es nicht genug, dass Sie den Selektor :contains() verwenden. Sie müssen auch prüfen, ob der gesuchte Text Direkter Inhalt des Elements, auf das Sie abzielen:

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;
}
85
yoav barnea

Fellas, ich weiß, das ist alt, aber hey, ich habe diese Lösung, von der ich denke, dass sie besser als alle anderen funktioniert. In erster Linie wird die Groß-/Kleinschreibung überwunden, mit der die jquery: contain () 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.

20
Morgs

Rockets Antwort funktioniert nicht.

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

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

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

fügen Sie dem Code den Selektor ": last " hinzu, um dieses Problem zu beheben.

16
Terry Lin

Bester Weg meiner Meinung nach.

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

Ja, verwenden Sie den Selektor jQuery contains .

9
Alex Turpin