jQuery: trouver l'élément de 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 distinction de classes ou id. (Puis j'ai ensuite besoin de trouver de l'élément parent.)

InformationsquelleAutor sisko | 2011-09-06
  1. 389

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

    Démo ici

    JS:

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

    HTML:

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

    • Grand, mais il est sensible à la casse. Est-il de toute façon on peut faire une recherche insensible à la casse?
    • Vous devez utiliser le .filter à la place. $('div').filter(function(){ return $(this).text().toLowerCase() === 'test';})
    • Oui, veuillez utiliser le appraoch @RocketHazmat utilise, disons que vous avez 5 éléments avec le préfixe 'Inscrire Contrat" et chacun a un certain nombre de suffixe. Vous finirez les sélectionnant tous, alors qu'en réalité, vous voulez seulement de l'élément, le texte: 'Enregistrer Contrat de 26'.
    • Bien qu' :contient est sensible à la casse, il a travaillé pour moi parce que j'ai passé l'exacte chaîne de texte à rechercher.
    InformationsquelleAutor Rocket Hazmat
  2. 85

    Dans la documentation de jQuery, il est dit:

    Le texte correspondant peuvent apparaître directement à l'intérieur de l'élément sélectionné, en
    tout de cet élément descendants, ou une combinaison

    Par conséquent, il n'est pas assez que vous utilisez :contains() sélecteur de, vous devez également vérifier si le texte que vous recherchez est la direct 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;
}
    • Viens de tomber sur ce problème précis. Ce devrait être plus élevé.
    • Cette solution peut échouer dans le scénario suivant: <li>Hello <a href='#'>World</a>, How Are You. . Ici, si How la recherche de la condition échoue, je pense.
    • Je ne sais pas comment cela fonctionne, mais ça fonctionne
    InformationsquelleAutor yoav barnea
  3. 20

    Les gars, je sais que c'est vieux mais bon j'ai cette solution qui, je pense, fonctionne mieux que tous. D'abord et avant tout surmonte le Cas de la Sensibilité que l'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()

    Espère que quelqu'un dans un avenir proche le trouve utile.

    • w/o .contents().filter il ne fonctionnera pas sur les enfants
    InformationsquelleAutor Morgs
  4. 16

    De la fusée réponse ne fonctionne pas.

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

    J'ai simplement modifié son DÉMO ici et vous pouvez voir la racine DOM est sélectionné.

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

    ajouter ":dernier" sélecteur dans le code pour corriger cela.

    • Cela fonctionne mieux lorsque le sélecteur retourne plusieurs résultats et vous avez besoin de la réduire à un élément spécifique où vous n'avez pas d'attribut "Id" de référence.
    InformationsquelleAutor Terry Lin
  5. 13

    Meilleure façon à mon avis.

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

    Oui, utiliser le jQuery contient sélecteur.

    • re, pas de ne pas: "contient:" ne faites pas une correspondance exacte, seulement si l'aiguille est insérée (d'où son nom) dans la botte de foin... comme d'autres l'ont dit ici
    • Ce n'est pas une réponse.
    • Comment est-ce une bonne réponse?
    InformationsquelleAutor Alex Turpin