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


308

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

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



Ответы:


432

Вы можете использовать :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>


2
Отлично, но это чувствительно к регистру. Есть ли в любом случае мы можем сделать поиск без учета регистра?
Дипу Радж

123
@DipuRaj: Вы должны использовать .filterвместо этого. $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
Ракета Хазмат

5
Да, пожалуйста, используйте appraoch @RocketHazmat , скажем, у вас есть 5 элементов с префиксом «Register Contract», и у каждого есть суффикс номера. В итоге вы выберете их все , когда в действительности вам нужен только элемент с текстом: «Зарегистрировать договор 26» .
Фэн Хо

1
Несмотря на то, что: contains учитывает регистр, у меня это сработало, потому что я передал точную текстовую строку для поиска.
Франсиско Кинтеро

1
В случае, если это помогает кому-то еще, кто любит использовать пробелы в своих паренах, следующее не работает:$('div:contains( "test" )').css('background-color', 'red');
М Кац

92

В документации 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;
}

3
Просто столкнулся с этой точной проблемой. Это должно быть выше.
DickieBoy

2
Это решение , возможно , не в следующем сценарии <li>Hello <a href='#'>World</a>, How Are You. . HowЯ думаю, что в случае поиска условие не будет выполнено.
me_digvijay

23

Ребята, я знаю, что это старо, но эй, у меня есть это решение, которое, я думаю, работает лучше, чем все. В первую очередь преодолевается чувствительность к регистру, которую 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()

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


18

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

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

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

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

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


Это работает лучше всего, когда селектор возвращает несколько результатов, и вам нужно сузить его до определенного элемента, у которого нет атрибута «Id» для ссылки.
Тахир Халид

14

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

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

8

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


10
э, нет, не: 'содержит:' не делает точного соответствия, только то, содержится ли игла (отсюда и название) в стоге сена ... как уже говорили здесь
Майк Грызун

3
Это не ответ.
lharby

4

Следующий 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>


Это лучший ответ!
Calciol
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.