Wie mache ich jQuery Contains unabhängig von Groß- und Kleinschreibung, einschließlich jQuery 1.8+?

91

Ich versuche, "enthält" Groß- und Kleinschreibung unempfindlich zu verwenden. Ich habe versucht, die Lösung bei der folgenden Frage zum Stapelüberlauf zu verwenden, aber es hat nicht funktioniert:

Gibt es eine Groß- und Kleinschreibung ohne Berücksichtigung von jQuery: enthält Selektor?

Der Einfachheit halber wird die Lösung hier kopiert:

jQuery.extend(
        jQuery.expr[':'], { 
                Contains : "jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase())>=0" 
});

Hier ist der Fehler:

Error: q is not a function
Source File: /js/jquery-1.4.js?ver=1.4
Line: 81

Hier ist, wo ich es benutze:

  $('input.preset').keyup(function() {
    $(this).next().find("li").removeClass("bold");
    var theMatch = $(this).val();
    if (theMatch.length > 1){
      theMatch = "li:Contains('" + theMatch + "')";
      $(this).next().find(theMatch).addClass("bold");
    }
  });

Meine Verwendung der ursprünglichen Groß- und Kleinschreibung "enthält" im selben Szenario funktioniert ohne Fehler. Hat jemand irgendwelche Ideen? Das würde ich gut finden.

Matrym
quelle
Falls jemand interessiert ist, habe ich meinen Blog-Beitrag auf drei weitere enthält :containsExact, enthält Selektoren :containsExactCaseund :containsRegexSelektoren, die jetzt in allen Versionen von jQuery funktionieren.
Mottie
Ich denke, .filter () ist ein weiterer guter Weg. Referenz
瑲 瑲

Antworten:

127

Dies ist, was ich in einem aktuellen Projekt verwende, hatte keine Probleme. Sehen Sie, ob Sie mit diesem Format mehr Glück haben:

jQuery.expr[':'].Contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};

In jQuery 1.8 wurde die API dafür geändert. Die jQuery 1.8+ Version davon wäre:

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {
    return function( elem ) {
        return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

Sie können es hier testen . Weitere Informationen zu mehr als 1.8 benutzerdefinierten Selektoren finden Sie im Sizzle-Wiki hier .

Nick Craver
quelle
Du bist ein Lebensretter. Vielen Dank.
Matrym
3
Gibt es eine Chance, dass Sie genau darüber sprechen, was dies tut?
Abe Miessler
4
@ClovisSix - danke für das Heads-up, ich habe eine 1.8+ Methode bereitgestellt, um dasselbe zu tun. Lassen Sie mich wissen, wenn Sie irgendwelche Probleme haben.
Nick Craver
1
Zu beachten, dass dies nicht ersetzt: enthält nur einen weiteren Selektor hinzufügen: Enthält.
Albanx
3
Der Selektor sollte aufgerufen icontainswerden oder ähnliches.
Sebastian
43

Es ist erwähnenswert, dass die Antwort korrekt ist, aber nur :Containsden Alias abdeckt , der :containszu unerwartetem Verhalten führen kann (oder vom Design für erweiterte Anwendungen verwendet werden kann, die sowohl eine vertrauliche als auch eine unempfindliche Suche erfordern).

Dies könnte durch Duplizieren der Erweiterung für den Alias ​​behoben werden:

jQuery.expr[':'].Contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};
jQuery.expr[':'].contains = function(a, i, m) { 
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0; 
};

Ich habe eine Weile gebraucht, um herauszufinden, warum es bei mir nicht funktioniert hat.

Ellipse
quelle
Ich hätte das oben kommentiert, aber anscheinend kann ich das nicht.
Ellipse
5
Ich bin mir nicht sicher, was du hier vorhast. Dies überschreibt das erwartete, dokumentierte Verhalten von :contains. Ich denke, es ist klarer, das Original in :containsRuhe zu lassen und Ihren neuen Selektor anzurufen :icontains.
Justin Force
5
Das ist neben dem Punkt meines Beitrags. Das Erstellen eines alternativen Selektors ist sicherlich eine gültige Option. Ich habe jedoch darauf hingewiesen, dass das Erweitern: enthält, aber das Erweitern vernachlässigt: Enthält kann zu Verwirrung bei den Benutzern führen, wenn sie unterschiedliche Ergebnisse liefern.
Ellipse
1
Dann danke, dass du dieses "Gotcha" geteilt hast. :) Trotzdem halte ich es für eine gute Idee zu erwähnen, dass es besser ist, das eingebaute Verhalten nicht zu überschreiben, wenn es weniger Arbeit ist, ein zerstörungsfreies, paralleles Verhalten aufzubauen.
Justin Force
Ich habe ein paar verschiedene Lösungen dafür ausprobiert und diese hat endlich funktioniert. Vielen Dank.
Taylor Michel
27

Ich würde so etwas tun

     $.expr[':'].containsIgnoreCase = function (n, i, m) {
        return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
    };

Und in Ruhe lassen :contains...

DEMO

Warum unterstützt jQuery es in seiner Bibliothek nicht?! wenn es so einfach ist ...

weil Ihr Code den Truthahncode übergibt?

Mina Gabriel
quelle
6

Kann zu spät sein ... aber,

Ich würde lieber diesen Weg gehen ..

$.extend($.expr[":"], {
"MyCaseInsensitiveContains": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});

Auf diese Weise manipulieren Sie NICHT jQuerys NATIVE '.contains' ... Möglicherweise benötigen Sie später die Standardeinstellung ... Wenn Sie manipuliert werden, befinden Sie sich möglicherweise wieder bei stackOverFlow ...

ErickBest
quelle
0

Ich erlaube mir, meine Freunde hinzuzufügen:

$.expr[":"].containsNoCase = function (el, i, m) { 
    var search = m[3]; 
    if (!search) return false; 
    return eval("/" + search + "/i").test($(el).text()); 
}; 
Bresleveloper
quelle
0

Ich konnte die Groß- und Kleinschreibung von jQuery einfach ignorieren, um mit dem folgenden Code das zu erreichen, was ich möchte:

            $.expr[":"].contains = $.expr.createPseudo(function(arg) {
            return function( elem ) {
                return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
            };
        });

Über diesen Link können Sie Code finden, der auf Ihren jQuery-Versionen basiert, um die Groß- und Kleinschreibung zu ignorieren. Https://css-tricks.com/snippets/jquery/make-jquery-contains-case-insensitive/

Auch wenn Sie verwenden möchten: enthält und eine Suche durchführen möchten, sollten Sie sich Folgendes ansehen: http://technarco.com/jquery/using-jquery-search-html-text-and-show-or-hide- entsprechend

Umesh Patil
quelle