jQuery: encontrar elemento pelo texto


308

Alguém pode me dizer se é possível encontrar um elemento com base em seu conteúdo, e não por um ID ou classe ?

Estou tentando encontrar elementos que não têm classes ou IDs distintos. (Então, preciso encontrar o pai desse elemento.)



Respostas:


432

Você pode usar o :containsseletor para obter elementos com base em seu conteúdo.

Demonstração aqui

$('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
Ótimo, mas diferencia maiúsculas de minúsculas. Existe alguma maneira de fazer uma pesquisa sem distinção entre maiúsculas e minúsculas?
Dipu Raj

123
@DipuRaj: Você teria que usar .filter. $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
Rocket Hazmat

5
Sim, use a abordagem que o @RocketHazmat usa, digamos que você tenha 5 elementos, todos prefixados com 'Registrar contrato' e cada um com um sufixo numérico. Você acabará selecionando todos eles , quando, na realidade, deseja apenas o elemento com o texto: 'Registrar contrato 26' .
Feng Huo 14/10

1
Embora: contains faça distinção entre maiúsculas e minúsculas, funcionou para mim porque passei a string de texto exata a ser encontrada.
Francisco Quintero

1
Caso ajude alguém que gosta de usar espaços em suas parênteses, o seguinte não funciona:$('div:contains( "test" )').css('background-color', 'red');
M Katz

92

Na documentação do jQuery, diz:

O texto correspondente pode aparecer diretamente dentro do elemento selecionado, em qualquer um dos descendentes desse elemento ou em uma combinação

Portanto, não basta usar o :contains() seletor , você também precisa verificar se o texto que você procura é o conteúdo direto do elemento que você está alvejando, algo assim:

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
Acabei de encontrar este problema exato. Isso deve ser maior.
24715 DickieBoy

2
Esta solução pode falhar no seguinte cenário: <li>Hello <a href='#'>World</a>, How Are You. . Aqui, se Howestiver sendo pesquisado, a condição falhará, eu acho.
me_digvijay

23

Pessoal, eu sei que isso é antigo, mas ei, eu tenho essa solução que acho que funciona melhor do que todas. Em primeiro lugar, supera a sensibilidade de maiúsculas e minúsculas que o jquery: contém () é enviado com:

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

Espero que alguém no futuro próximo considere útil.


18

A resposta de Rocket não funciona.

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

Simplesmente modifiquei sua DEMO aqui e você pode ver que o DOM raiz está selecionado.

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

adicione o seletor " : last " no código para corrigir isso.


Isso funciona melhor quando o seletor retorna vários resultados e você precisa reduzi-lo a um elemento específico no qual você não tem nenhum atributo "Id" para fazer referência.
Tahir Khalid

14

Melhor maneira na minha opinião.

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

8

Sim, use o containsseletor jQuery .


10
er, não, não: 'Contém:' não fazer uma correspondência exata só se a agulha está contido (daí o nome) no palheiro ... como já foi dito aqui
mike roedor

3
Esta não é uma resposta.
Lharby # 12/16

4

O jQuery a seguir seleciona nós div que contêm texto, mas não têm filhos, que são os nós folha da árvore 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>


Esta é a melhor resposta!
Calciol 10/10/19
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.