jQuery: rechercher un élément par texte

Quelqu'un peut-il me dire s'il est possible de trouver un élément en fonction de son contenu plutôt que par un identifiant ou une classe ?

J'essaie de trouver des éléments qui n'ont pas de classes ou d'ID distincts. (Ensuite, je dois ensuite trouver le parent de cet élément.)

Vous pouvez utiliser le :containssélecteur pour obtenir des éléments en fonction de leur contenu.

Démo ici

$('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>

Dans la documentation jQuery, il est dit:

Le texte correspondant peut apparaître directement dans l'élément sélectionné, dans n'importe lequel des descendants de cet élément, ou dans une combinaison

Par conséquent, il ne suffit pas d'utiliser le :contains() sélecteur , vous devez également vérifier si le texte que vous recherchez est le contenu direct de l'élément que vous ciblez, quelque chose comme ça:

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

Fellas, je sais que c'est vieux mais bon j'ai cette solution qui je pense fonctionne mieux que tout. Surtout surmonte la sensibilité à la casse avec laquelle jquery: contains () est livré avec:

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

J'espère que quelqu'un dans un proche avenir le trouvera utile.

La réponse de Rocket ne fonctionne pas.

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

J'ai simplement modifié son DEMO ici et vous pouvez voir que le DOM racine est sélectionné.

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

ajoutez le sélecteur " : last " dans le code pour résoudre ce problème.

Le meilleur moyen à mon avis.

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

Oui, utilisez le containssélecteur jQuery .

Le jQuery suivant sélectionne les nœuds div qui contiennent du texte mais sans enfants, qui sont les nœuds feuilles de l'arborescence 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>