jQuery: trova elemento per testo

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

È 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>

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

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.

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.

Il modo migliore secondo me.

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

Sì, utilizzare il containsselettore jQuery .

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>