jQuery: rechercher un élément par texte


308

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



Réponses:


432

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>


2
Génial, mais il est sensible à la casse. Existe-t-il de toute façon une recherche insensible à la casse?
Dipu Raj

123
@DipuRaj: Vous devez utiliser à la .filterplace. $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
Rocket Hazmat

5
Oui, veuillez utiliser l'approoch @RocketHazmat , disons que vous avez 5 éléments tous préfixés avec 'Register Contract' et chacun a un suffixe numérique. Vous finirez par les sélectionner tous , alors qu'en réalité vous ne voulez que l'élément avec le texte: 'Register Contract 26' .
Feng Huo

1
Bien que: contient soit sensible à la casse, cela a fonctionné pour moi car j'ai passé la chaîne de texte exacte à rechercher.
Francisco Quintero

1
Dans le cas où cela aiderait quelqu'un d'autre qui aime utiliser des espaces dans leurs parens, ce qui suit ne fonctionne pas :$('div:contains( "test" )').css('background-color', 'red');
M Katz

92

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

3
Je suis juste tombé sur ce problème exact. Cela devrait être plus élevé.
DickieBoy

2
Cette solution peut échouer dans le scénario suivant: <li>Hello <a href='#'>World</a>, How Are You. . Ici, si Howon recherche la condition échouera je pense.
me_digvijay

23

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.


18

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.


Cela fonctionne mieux lorsque le sélecteur renvoie plusieurs résultats et que vous devez le réduire à un élément spécifique où vous n'avez aucun attribut "Id" à référencer.
Tahir Khalid

14

Le meilleur moyen à mon avis.

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

8

Oui, utilisez le containssélecteur jQuery .


10
euh, non: 'contient:' ne fait pas de correspondance exacte, seulement si l'aiguille est contenue (d'où le nom) dans la botte de foin ... comme d'autres l'ont dit ici
mike rodent

3
Ce n'est pas une réponse.
lharby

4

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>


C'est la meilleure réponse!
Calciol
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.