Link per Text auswählen (genaue Übereinstimmung)

89

Mit jQuery möchte ich einen Link auswählen, der genau eine Art Text enthält. Beispielsweise:

<p><a>This One</a></p>
<p><a>"This One?"</a></p>
<p><a>Unlikely</a></p>

Ich habe das versucht:

$('a:contains("This One")')

Aber es wählt den ersten UND den zweiten Link. Ich möchte nur den ersten Link, der genau "This One" enthält. Wie kann ich das machen?

Endy Tjahjono
quelle
Mögliches Duplikat des Select-Elements basierend auf EXACT-Textinhalten
Steve Chambers

Antworten:

138

Du kannst das:

$('a').filter(function(index) { return $(this).text() === "This One"; });

Referenz: http://api.jquery.com/filter/

FishBasketGordo
quelle
5
Beides würde in diesem Fall funktionieren, aber ich neige dazu, === zu verwenden, da es mit Wert und Typ übereinstimmt, dh die Typen werden nicht erzwungen. stackoverflow.com/questions/359494/…
FishBasketGordo
1
Du hast es verpasst return. Ich muss es ändern infunction(index) { return (this.text === 'This One') }
Endy Tjahjono
Außerdem können Sie die Textlänge überprüfen.
Bestinamir
39

Ein Mitarbeiter von mir hat jQuery um folgende Funktion erweitert:

$.expr[':'].textEquals = function(a, i, m) {
    return $(a).text().match("^" + m[3] + "$");
};

Das Ergebnis ist, dass Sie etwas durch exakten Text auf folgende Weise auswählen können:

$("label:textEquals('Exact Text to Match')");

Dies macht es einfach, da Sie sich nicht jedes Mal die genaue Syntax merken müssen. Sein gesamter Beitrag ist hier: jQuery Custom Selector zum Auswählen von Elementen nach genauem Text: textEquals

Narnian
quelle
28

Um die Antwort von FishBasketGordo zu erweitern. Wenn Sie versuchen, die Auswahl für eine große Anzahl von Elementen zu treffen, verwenden Sie diese Option, um :contains()sie einzugrenzen, und wenden Sie dann den Filter an.

Dies verbessert die Gesamtgeschwindigkeit:

$('a:contains("This One")').filter(function(index)
{
    return $(this).text() === "This One";
});
djhansel
quelle
Für Geschwindigkeit / Effizienz gestimmt. Vermeidet außerdem die Notwendigkeit von $ .trim () Leerzeichen in .filter (..).
JoePC
8

musste Narimans Lösung modifizieren, um zu sein:

$.expr[':'].textEquals = function(a, i, m) {
    var match = $(a).text().match("^" + m[3] + "$")
    return match && match.length > 0;                                                                                                                                                                                                                                            
}

Ansonsten funktionierte nicht auf Chrome (Linux)

Bogenschütze
quelle
6

Ich habe die Erweiterung verwendet

$.expr[':'].textEquals

Ich habe jedoch festgestellt, dass die Implementierung mit jQuery 1.7 nicht mehr funktioniert (anscheinend eine Änderung in Sizzla.filter). Nachdem ich einige Zeit damit zu kämpfen hatte, dass es funktioniert, habe ich einfach ein jQuery-Plugin geschrieben, um dasselbe zu erreichen.

$.fn.textEquals = function (text) {
    var match = false;
    $(this).each(function () {
        if ($(this).text().match("^" + escapeRegex(text) + "$")) {
            match = true;
            return false;
        }
    });
    return match;
};

Verwenden:

$(".ui-autocomplete li").textEquals('Exact Text to Match');

Ich wollte nur teilen, falls jemand anderes darauf stößt (,

Alvis
quelle
3

Narnians Antwort funktioniert also ziemlich gut. Bei der Verwendung in freier Wildbahn stieß ich jedoch auf einige Probleme, bei denen Dinge, von denen ich erwartet hätte, dass sie gefunden werden, nicht gefunden wurden. Dies lag daran, dass der Text des Elements manchmal von zufälligen Leerzeichen umgeben ist. Ich glaube, wenn Sie nach "Hello World" suchen, möchten Sie immer noch, dass es mit "Hello World" oder sogar "Hello World \ n" übereinstimmt. Daher habe ich der Funktion gerade die Methode "trim ()" hinzugefügt, mit der umgebende Leerzeichen entfernt werden, und sie hat begonnen, besser zu funktionieren. Außerdem habe ich die Variablennamen so geändert, dass sie mir etwas klarer erscheinen.

Speziell...

$.expr[':'].textEquals = function(el, i, m) {
    var searchText = m[3];
    var match = $(el).text().trim().match("^" + searchText + "$")
    return match && match.length > 0;
}

Und sekundäre Anmerkung ... Trimmen entfernt nur Leerzeichen vor und nach dem gesuchten Text. Leerzeichen in der Mitte der Wörter werden nicht entfernt. Ich glaube, das ist wünschenswertes Verhalten, aber Sie können das ändern, wenn Sie wollen.

bwest87
quelle
3
$('a:contains("This One")')[0];

Ich habe das Gefühl, dass mir etwas fehlt, basierend auf der Antwort aller anderen auf den Filter, aber warum nicht einfach das erste Element innerhalb des Arrays von Elementen auswählen, das von 'enthält' zurückgegeben wird?

Dies funktioniert nur, wenn Sie wissen, dass der erste Link genau die gewünschte Übereinstimmung aufweist. Andere Antworten funktionieren besser, wenn Sie nicht sicher sind, in welcher Reihenfolge sich die Links befinden.

Michael Khalili
quelle
Weil er nicht immer weiß, dass derjenige, den er will, der erste ist
Cameron
Die Frage lautet speziell "Ich möchte nur den ersten Link".
Michael Khalili
Die Frage fragt nach der genauen Übereinstimmung, der Autor gibt das erste Element an, das erklärt, welches Element gewünscht wird.
Dlopezgonzalez
2

So erhalten Sie den ausgewählten Wert von einem Drop-Dwon:

$.fn.textEquals = function (text) {
    var match = false; 
    var values="";
    $(this).each(function () {
        if ($(this).text().match("^" + text + "$")) {
            values=$(this).val();
            match = true;
            return false;
        }
    });
    return values;
};

console.log($("option").textEquals("Option One")); - Es wird der Wert des Dropdowns zurückgegeben

Iulia Lucaciu
quelle
2
var link = $('a').filter(function(index) { return $(this).text() === "Availability"; });
 $(link).hide();
        $(link).removeAttr('href');
David Fawzy
quelle
1
Bitte fügen Sie Ihrer Antwort eine Erklärung hinzu.
Michał Perłakowski
Die erste Zeile, um einen Link mit diesem Text auszuwählen, die zweite und dritte Zeile, was können Sie mit dem Link tun, um sie auszublenden oder den Link zu deaktivieren? Schauen
David Fawzy
@ DavidFawzy - Entschuldigung, ähm ... was? Ich denke nicht, dass die 2. oder 3. Zeile etwas mit der Frage des OP zu tun hat - es sorgt nur für Verwirrung.
14.
2

Entschuldigung, wenn dies genau mit der obigen Antwort übereinstimmt,

   $.fn.equalsText = function (text, isCaseSensitive) {
      return $(this).filter(function () {
         if (isCaseSensitive) {
            return $(this).text() === text
         } else {
            return $(this).text().toLowerCase() === text.toLowerCase()
         }
      })
   }

Hier finden Sie einige Ausgaben in der Linkedin-Suchergebnisseitenkonsole.

$("li").equalsText("Next >", false)
[<li class=​"next">​…​</li>​] // Output

$("li").equalsText("next >", false)
[<li class=​"next">​…​</li>​] // Output

$("li").equalsText("Next >", true)
[<li class=​"next">​…​</li>​] // Output

$("li").equalsText("next >", true)
[] // Output

Es unterstützt auch die Groß- und Kleinschreibung und wird nicht verwendet :contains()

Bearbeiten (22. Mai 2017): -

   $.fn.equalsText = function (textOrRegex, isCaseSensitive) {
      return $(this).filter(function () {
         var val = $(this).text() || this.nodeValue
         if (textOrRegex instanceof RegExp) {
            return textOrRegex.test(val)
         } else if (isCaseSensitive) {
            return val === textOrRegex
         } else {
            return val.toLowerCase() === textOrRegex.toLowerCase()
         }
      })
   }
Vikas Gautam
quelle