jQuery: trouver un élément par texte
Quelqu'un Peut me dire si 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 distinctes ou d'id. (alors j'ai besoin de trouver le parent de cet élément.)
6 réponses
Vous pouvez utiliser le :contains sélecteur pour obtenir des éléments en fonction de leur contenu.
<div>This is a test</div>
<div>Another Div</div>
$('div:contains("test")').css('background-color', 'red');
Dans la documentation jQuery, il est dit:
Le texte correspondant peut apparaître directement dans l'élément sélectionné, dans l'un des descendants de cet élément, ou une combinaison
Par conséquent, il n'est pas assez que vous utilisez :contains() sélecteur, vous devez également vérifier si le texte que vous recherchez est le directs contenu de l'élément que vous visez pour, 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;
}
, les Gars, je sais que c'est vieux mais bon j'ai cette solution qui, je pense, fonctionne mieux que tous. Tout d'abord surmonte la sensibilité à la casse que 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é sa démo 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.
La meilleure façon à mon avis.
$.fn.findByContentText = function (text) {
return $(this).contents().filter(function () {
return $(this).text().trim() == text.trim();
});
};