So wählen Sie alle Ankertags mit einem bestimmten Text aus

73

Bei mehreren Ankertags:

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

Wie wähle ich die Anker aus, die der Klasse und einem bestimmten Text entsprechen? zB Alle Anker mit der Klasse auswählen: 'myclass' und text: 'My Text'

jquery html css-selectors Geoff Appleford
quelle

Antworten:

129 
$("a.myclass:contains('My Text')")
David Morton
quelle
Danke David. Wie mache ich einen genauen Übereinstimmungsvergleich, anstatt ihn zu enthalten? Ich möchte nur Elemente, die genau übereinstimmen.
Geoff Appleford
Ich würde nur zwischen Links und Lesezeichen unterscheiden:​$('a.myclass[href]:contains("My Text")')​​​​
Marko Dumic
1
@geoff: Es gibt keine eingebaute Möglichkeit, eine genaue Übereinstimmung zu erhalten. Sie können entweder die .each-Funktion verwenden, um alle zu durchlaufen, oder Sie können Ihren eigenen jQuery-Selektor schreiben. Eric Martin hat eine gute für die genaue Übereinstimmung geschrieben. Sie finden es hier: ericmmartin.com/creating-a-custom-jquery-selector
David Morton
Genau das, was ich brauchte. Vielen Dank.
Geoff Appleford
2
Was ist zu tun, wenn es nicht einmal eine Klasse gibt, anhand derer man sich identifizieren kann?
Amalgovinus
15

Sie können eine benutzerdefinierte Auswahl erstellen, die der :containsfür genaue Übereinstimmungen ähnelt :

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

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

Wenn Sie nur gestört sind, wenn der Text des Ankers eine bestimmte Zeichenfolge enthält , wählen Sie die Lösung von @Dave Morton. Wenn Sie jedoch genau mit einer bestimmten Zeichenfolge übereinstimmen möchten , würde ich Folgendes vorschlagen:

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

Leicht verbesserte Version (mit einem zweiten Trimmparameter ):

$.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>
karim79
quelle
3

Wählen Sie zunächst alle Tags aus, die 'MEIN Text' enthalten. Wenn jede genaue Übereinstimmung mit der Bedingung übereinstimmt, tun Sie, was immer Sie wollen.

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

        if ($store == 'My Text') {
            //do Anything.....
        }
    });
});
Monika
quelle
Wählen Sie zuerst alle Tags aus, die 'MEIN Text' enthalten, und setzen Sie sie dann für eine genaue Übereinstimmung in die if-Bedingung. dann mach was immer du willst.
Monika
Fügen
0

Wenn Sie die Klasse des gewünschten Objekts nicht kennen und nur nach dem Linktext suchen möchten, können Sie ihn verwenden

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

Wenn Sie nicht einmal wissen, um welches Element es sich handelt (z. B. a, p, link, ...), können Sie es verwenden

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

(Lassen Sie das Teil einfach :leer.)

Ich muss hier hinzufügen, dass alle Elemente beginnend mit <html>-Tag bis zum gewünschten Element angezeigt werden. Eine Lösung, die ich anbieten könnte, ist das Hinzufügen .last(), aber diese funktioniert nur, wenn nur ein einziges Element zu finden ist. Vielleicht sbdy. kennt hier eine bessere Lösung.

Eigentlich sollte dies eine Ergänzung zur akzeptierten Antwort sein, insbesondere zur @ Malgovinus-Frage.

mmika1000
quelle
-2

Ich denke, das sollte für die exakte Übereinstimmung funktionieren.

$("a.myclass").html() == "your text"
Muhammad Tanweer
quelle
Funktioniert nicht. html()gilt nur für das erste Element in der Gruppe der übereinstimmenden Elemente ( api.jquery.com/html ). Sie benötigen einen Kontrollfluss oder eine Iteration, um durch jeden der Anker zu gehen, z each().
Dyoo