jQuery: trova elemento per testo


308

Qualcuno può dirmi se è possibile trovare un elemento in base al suo contenuto piuttosto che da un ID o una classe ?

Sto cercando di trovare elementi che non hanno classi o ID distinti. (Quindi ho bisogno di trovare il genitore di quell'elemento.)



Risposte:


432

È possibile utilizzare il :containsselettore per ottenere elementi in base al loro contenuto.

Demo qui

$('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
Fantastico, ma è case sensitive. Esiste comunque una ricerca senza distinzione tra maiuscole e minuscole?
Dipu Raj,

123
@DipuRaj: dovresti usare .filterinvece. $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
Rocket Hazmat,

5
Sì, si prega di utilizzare l'appraoch utilizzato da @RocketHazmat , supponiamo che tu abbia 5 elementi tutti preceduti da "Registra contratto" e ognuno ha un suffisso numerico. Finirai per selezionarli tutti , quando in realtà vuoi solo l'elemento con il testo: 'Registra contratto 26' .
Feng Huo,

1
Sebbene: contenga la distinzione tra maiuscole e minuscole, ha funzionato per me perché ho passato la stringa di testo esatta da trovare.
Francisco Quintero,

1
Nel caso in cui aiuti qualcun altro a cui piace usare gli spazi nelle proprie parentesi, il seguente non funziona:$('div:contains( "test" )').css('background-color', 'red');
M Katz

92

Nella documentazione di jQuery si dice:

Il testo corrispondente può apparire direttamente all'interno dell'elemento selezionato, in qualsiasi discendente di quell'elemento, o in una combinazione

Pertanto, non è sufficiente utilizzare il :contains() selettore , è inoltre necessario verificare se il testo cercato è il contenuto diretto dell'elemento che si sta prendendo di mira, qualcosa del genere:

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
Ho appena incontrato questo esatto problema. Questo dovrebbe essere più alto.
DickieBoy,

2
Questa soluzione potrebbe non riuscire a scenario seguente: <li>Hello <a href='#'>World</a>, How Are You. . Qui se Howviene cercata la condizione fallirà, penso.
me_digvijay,

23

Ragazzi, so che questo è vecchio ma ehi, ho questa soluzione che penso funzioni meglio di tutti. Innanzitutto supera la sensibilità del case che jquery: Includes () viene spedito con:

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

Spero che qualcuno nel prossimo futuro lo trovi utile.


18

La risposta di Rocket non funziona.

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

Ho semplicemente modificato la sua DEMO qui e puoi vedere che il DOM principale è selezionato.

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

aggiungi il selettore " : last " nel codice per risolvere questo problema.


Funziona meglio quando il selettore restituisce più risultati e devi restringerlo a un elemento specifico in cui non hai alcun attributo "Id" a cui fare riferimento.
Tahir Khalid il

14

Il modo migliore secondo me.

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

8

Sì, utilizzare il containsselettore jQuery .


10
ehm, no non: "contiene:" non fa una corrispondenza esatta, solo se l'ago è contenuto (quindi il nome) nel pagliaio ... come altri hanno già detto qui
mike rodent

3
Questa non è una risposta
Lharby,

4

Il seguente jQuery seleziona i nodi div che contengono testo ma non hanno figli, che sono i nodi foglia dell'albero 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>


Questa è la risposta migliore!
Calciol,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.