jQuery: Element anhand von Text suchen

Kann mir jemand sagen, ob es möglich ist, ein Element anhand seines Inhalts und nicht anhand einer ID oder Klasse zu finden ?

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

Sie können den :containsSelektor 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>

In der jQuery-Dokumentation heißt es:

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

Daher reicht es nicht aus, dass Sie den :contains() Selektor verwenden . Sie müssen auch überprüfen, ob der gesuchte Text der direkte Inhalt des Elements ist, 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;
}

Fellas, ich weiß, das ist alt, aber hey, ich habe diese Lösung, die meiner Meinung nach besser funktioniert als alle anderen. In erster Linie überwindet die Groß- und Kleinschreibung, mit der die jquery: enthält () geliefert wird mit:

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.

Rockets Antwort funktioniert nicht.

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

Ich habe hier einfach sein DEMO 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 im Code den Selektor " : last " hinzu, um dies zu beheben.

Bester Weg meiner Meinung nach.

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

Ja, verwenden Sie den jQuery- containsSelektor.

In der folgenden jQuery werden Div-Knoten ausgewählt, die Text enthalten, aber keine untergeordneten Knoten haben. Dies sind die Blattknoten des DOM-Baums.

$('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>