jQuery: найти элемент по тексту

Может кто-нибудь сказать мне, если можно найти элемент на основе его содержимого, а не по идентификатору или классу ?

Я пытаюсь найти элементы, которые не имеют отдельных классов или идентификаторов. (Затем мне нужно найти родителя этого элемента.)

Вы можете использовать :containsселектор, чтобы получить элементы на основе их содержимого.

Демо здесь

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

В документации JQuery это говорит:

Соответствующий текст может появляться непосредственно внутри выбранного элемента, в любом из потомков этого элемента или в комбинации

Поэтому недостаточно использовать :contains() селектор , вам также нужно проверить, является ли текст, который вы ищете, прямым содержанием элемента, на который вы нацеливаетесь, что-то вроде этого:

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

Ребята, я знаю, что это старо, но эй, у меня есть это решение, которое, я думаю, работает лучше, чем все. В первую очередь преодолевается чувствительность к регистру, которую jquery: contains () поставляется с:

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

Надеюсь, что кто-то в ближайшем будущем найдет это полезным.

Ответ Ракеты не работает.

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

Я просто изменил его DEMO здесь, и вы можете видеть, что выбран корневой DOM.

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

добавьте « : последний » селектор в коде, чтобы исправить это.

Лучший способ на мой взгляд.

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

Да, используйте containsселектор jQuery .

Следующий jQuery выбирает узлы div, которые содержат текст, но не имеют дочерних узлов, которые являются конечными узлами дерева 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>