CSS-Selektor-groß-und Kleinschreibung für Attribute

Wenn ich ein HTML-element <input type="submit" value="Search" /> einen css-Selektor muss die groß- /Kleinschreibung:

input[value='Search'] entspricht

input[value='search'] entspricht nicht

Ich brauche eine Lösung, bei der die groß- /Kleinschreibung Ansatz funktioniert auch. Ich bin mit Selen 2 und Jquery, so Antworten beide sind willkommen.

Möglicherweise doppelte Frage? stackoverflow.com/questions/3967869/...

InformationsquelleAutor Alp | 2011-04-15

  1. 32

    Es existiert jetzt auch in CSS4 finden Sie diese Antwort.

    Ansonsten für jQuery, die Sie verwenden können,...

    $(':input[name]').filter(function() {
   return this.value.toLowerCase() == 'search';
});

    jsFiddle.

    Könnten Sie auch einen benutzerdefinierten Selektor...

    $.expr[':'].valueCaseInsensitive = function(node, stackIndex, properties){
     return node.value.toLowerCase() == properties[3];
};

var searchInputs = $(':input:valueCaseInsensitive("Search")');

    jsFiddle.

    Den benutzerdefinierten Selektor ist ein bisschen overkill, wenn dies einmal, aber wenn Sie brauchen, um verwenden Sie es viele Male in Ihrer Anwendung, kann es eine gute Idee.

    Update

    Ist es möglich, so eine Art custom-Selektor für jedes Attribut?

    Sicher, überprüfen Sie heraus das folgende Beispiel. Es ist ein wenig verworren (syntax wie :input[value:toLowerCase="search"] Mai wurden mehr intuitiv), aber es funktioniert 🙂

    $.expr[':'].attrCaseInsensitive = function(node, stackIndex, properties){
    var args = properties[3].split(',').map(function(arg) {
        return arg.replace(/^\s*["']|["']\s*$/g, '');  
    });
    return $(node).attr(args[0]).toLowerCase() == args[1];
};

var searchInputs = $('input:attrCaseInsensitive(value, "search")');

    jsFiddle.

    Könnten Sie wahrscheinlich verwenden eval() zu machen, dass ein string ein array, aber ich finde es wesentlich angenehmer (und Sie nicht versehentlich ausführen von beliebigen code, den Sie Platz in Ihrem Selektor).

    Stattdessen bin ich die Aufteilung der Saiten auf den , Trennzeichen, und dann Strippen Leerzeichen ' und " einer Seite jedes array-Mitglied. Beachten Sie, dass eine , im inneren ein Zitat nicht behandelt werden, buchstäblich. Es gibt keinen Grund, warum man verpflichtet sein sollten wörtlich, aber man konnte immer code gegen diese Möglichkeit. Ich werde verlassen, dass bis zu Ihnen. 🙂

    Ich glaube nicht, dass map() hat die besten browser-Unterstützung, so können Sie ausdrücklich Iteration über die args array oder erweitern Sie die Array Objekt.

    die benutzerdefinierten Selektor sieht genau so aus wie das, was ich brauche. können Sie erklären, welche Eigenschaften von[3] ist?
    ist der string, der als argument übergeben, um die benutzerdefinierte Auswahl (die anderen Indizes sind verschiedene meta-Daten).
    ist es möglich, so eine Art custom-Selektor für jedes Attribut? so, dass alle Attribute, wie name, Wert, Klasse und so auf groß-und Kleinschreibung unterschieden?
    Ja, aber es wird ein wenig chaotisch. Lassen Sie mich ein update 🙂
    Gemacht das update.

    InformationsquelleAutor alex

  2. 47

    CSS4 (CSS-Selektor-Ebene 4) fügt Unterstützung für Sie:

    input[value='search' i]

    Es ist das "i" am Ende, das funktioniert der trick.

    Breiteren Einsatz begann Mitte 2016: Chrom (seit v49), Firefox (ab v47?), Opera und einige andere haben es. IE nicht und Edge noch nicht. Sehen "Kann ich"...

    Siehe stackoverflow.com/questions/27506735/..., wie Sie es in Ihrem browser funktioniert.
    Chrome-Unterstützung für diese version 49.0 (veröffentlicht im März 2016). Firefox-add-Unterstützung in version 47.0 (Buch erscheint voraussichtlich im Juni 2016). Quelle: developer.mozilla.org/en-US/docs/Web/CSS/...
    Kann ich bestätigen, es funktioniert mit plain Chrom Version 49.0.2623.108.

    InformationsquelleAutor Robert Siemer

  3. 7
    input[value='Search'] matches
input[value='search' i] Also matches in latest browsers

    Unterstützen:
    version : Chrom >= 49.0, Firefox (Gecko) >= 47.0, "Safari" >= 9

    InformationsquelleAutor ankit

  4. 1

    Können Sie es nicht mit Selektoren allein versuchen:

    $('input').filter(function() {
    return $(this).attr('value').toLowerCase() == 'search';
});
    Sie können auch mit val() es. Auch, es scheint, Sie wollen eine exakte übereinstimmung, nicht ein indexOf(). 🙂
    Sehr wahr, aber ich habe attr() zu zeigen, können Sie es verwenden, für andere Attribute als gut. Aktualisiert, um genaue übereinstimmung.

    InformationsquelleAutor Khez

Schreibe einen Kommentar