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
Чудово, але він враховує регістри. Чи все-таки ми можемо здійснити нечутливий випадок?
Dipu Raj

123
@DipuRaj: вам доведеться використовувати .filterзамість цього. $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
Ракета Hazmat

5
Так, будь-ласка, використовуйте програму appraoch @RocketHazmat , скажімо, у вас є 5 елементів, усі з префіксом "Зареєструвати контракт", і кожен має суфікс числа. Ви виберете їх усі , коли насправді вам потрібен лише елемент з текстом: "Зареєструйте контракт 26" .
Фен Хуо

1
Хоча: містить чутливий до регістру, він працював для мене, тому що я передав точний текстовий рядок, який потрібно знайти.
Франсіско Кінтеро

1
Якщо це допомагає комусь, хто любить використовувати пробіли у своїх паренах, це не працює:$('div:contains( "test" )').css('background-color', 'red');
M Katz

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: містить () постачається з:

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');

Додайте в код селектор " : last ", щоб виправити це.


Це найкраще працює, коли селектор повертає кілька результатів, і вам потрібно звузити його до певного елемента, де у вас немає атрибута "Id" для посилання.
Тахір Халід

14

Найкращий спосіб, на мій погляд.

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


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>


Це найкраща відповідь!
Кальчоль
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.