jQuery: znajdź element po tekście

Czy ktoś może mi powiedzieć, czy można znaleźć element na podstawie jego zawartości, a nie identyfikatora lub klasy ?

Próbuję znaleźć elementy, które nie mają odrębnych klas lub identyfikatorów. (Następnie muszę znaleźć element nadrzędny tego elementu).

Możesz użyć :containsselektora, aby uzyskać elementy na podstawie ich zawartości.

Demo tutaj

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

W dokumentacji jQuery jest napisane:

Dopasowany tekst może pojawić się bezpośrednio w wybranym elemencie, w dowolnym potomku tego elementu lub w kombinacji

Dlatego nie wystarczy użyć :contains() selektora , musisz również sprawdzić, czy szukany tekst jest bezpośrednią zawartością elementu, na który celujesz, coś takiego:

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

Faceci, wiem, że to stare, ale hej mam to rozwiązanie, które moim zdaniem działa lepiej niż wszyscy. Przede wszystkim eliminuje rozróżnianie wielkości liter, które jquery: zawiera () jest dostarczane z:

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

Mam nadzieję, że ktoś w najbliższej przyszłości uzna to za pomocne.

Odpowiedź rakiety nie działa.

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

Po prostu zmodyfikowałem tutaj jego DEMO i widać, że wybrany jest główny katalog DOM.

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

dodaj selektor „ : ostatni ” w kodzie, aby to naprawić.

Najlepszy sposób moim zdaniem.

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

Tak, użyj containsselektora jQuery .

Poniższy jQuery wybiera węzły div, które zawierają tekst, ale nie mają potomków, które są węzłami liści drzewa DOM.

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