web-dev-qa-db-fra.com

jQuery: rechercher un élément par le 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 id ou classe?

J'essaie de trouver des éléments qui n'ont pas de classes ou d'identifiants distincts. (Ensuite, j'ai besoin de trouver le parent de cet élément.)

jquerytextfind
280
sisko

Vous pouvez utiliser le sélecteur :contains 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>_
392
Rocket Hazmat

Dans la documentation jQuery, il est écrit:

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

Par conséquent, il ne suffit pas que vous utilisiez le sélecteur :contains(), 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;
}
85
yoav barnea

Mes amis, je sais que c'est vieux, mais bon, j'ai cette solution qui, à mon avis, fonctionne mieux que tout. D'abord et avant tout, surmonte la sensibilité à la casse avec laquelle jquery: contient () est livrée 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.

20
Morgs

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

16
Terry Lin

Le meilleur moyen à mon avis.

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

Oui, utilisez le sélecteur jQuery contains .

9
Alex Turpin