Wie kann ich mit jQuery Elemente nach Textinhalt finden?

Question 1

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.)

Question 2

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>

Question 3

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;
}

Question 4

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.

Question 5

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.

Question 6

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>

Question 7

Meiner Meinung nach der beste Weg.

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

Question 8

Ja, verwenden Sie die jQuery contains Wähler.