web-dev-qa-db-fra.com

Comment sélectionner toutes les balises d'ancrage avec un texte spécifique

Étant donné plusieurs balises d'ancrage:

<a class="myclass" href="...">My Text</a>

Comment puis-je sélectionner les ancres correspondant à la classe et avec un texte spécifique. Par exemple, sélectionnez toutes les ancres avec la classe: 'myclass' et le texte: 'My Text'

jqueryhtmlcss-selectors
65
Geoff Appleford
$("a.myclass:contains('My Text')")
117
David Morton

Vous pouvez créer un sélecteur personnalisé similaire à :contains pour les correspondances exactes:

$.expr[':'].containsexactly = function(obj, index, meta, stack) 
{  
    return $(obj).text() === meta[3];
}; 

var myAs = $("a.myclass:containsexactly('My Text')");
13
Andy E

Si vous n'êtes gêné que si le texte de l'ancre contient une chaîne particulière, optez pour la solution de @Dave Morton. Si, cependant, vous voulez exactement correspondre à une chaîne particulière, je suggérerais quelque chose comme ceci:

$.fn.textEquals = function(txt) {
    return $(this).text() == txt;
}

$(document).ready(function() {
    console.log($("a").textEquals("Hello"));
    console.log($("a").textEquals("Hefllo"))
});

<a href="blah">Hello</a>

Version légèrement améliorée (avec un second paramètre trim):

$.fn.textEquals = function(txt,trim) {
    var text = (trim) ? $.trim($(this).text()) : $(this).text();
    return text == txt;
}

$(document).ready(function() {
    console.log($("a.myclass").textEquals("Hello")); // true
    console.log($("a.anotherClass").textEquals("Foo", true)); // true
    console.log($("a.anotherClass").textEquals("Foo")); // false
});

<a class="myclass" href="blah">Hello</a>
<a class="anotherClass" href="blah">   Foo</a>
4
karim79

Tout d'abord, sélectionnez toutes les balises contenant "MON texte". Ensuite, pour chaque correspondance exacte, si elle correspond à la condition, faites ce que vous voulez.

$(document).ready(function () {
    $("a:contains('My Text')").each(function () {
        $store = $(this).text();

        if ($store == 'My Text') {
            //do Anything.....
        }
    });
});
3
Monika

Si vous ne connaissez pas la classe de l'objet souhaité et que vous souhaitez simplement rechercher le texte du lien, il est possible d'utiliser

$(".myClass:contains('My Text')")

Si vous ne savez même pas de quel élément il s'agit (par exemple a, p, lien, ...), vous pouvez utiliser

$(":contains('My Text')")

(en laissant simplement la partie avant : vide.)

Je dois ajouter ici qu'il fait apparaître tous les éléments à partir de <html> - Étiquetez jusqu'à l'élément souhaité. Une solution que je pourrais fournir est d'y ajouter .last(), mais celui-ci ne fonctionne que s'il n'y a qu'un seul élément à trouver. Peut-être sbdy. connaît une meilleure solution ici.

En fait, cela devrait être un ajout à la réponse acceptée, en particulier à la question @Amalgovinus.

0
Muli