Warum funktioniert der jQuery: visible-Selektor beim Filtern anders?

Question

Ich bemerkte heute, dass der :visible Selektor von jQuery ein unerwartetes Verhalten zeigt, wenn er mit einem Attributselektor kombiniert wird. Sein Verhalten unterscheidet sich in Abhängigkeit von
a) ob es inline oder in dem Filterverfahren verwendet wird
b) die Art der Attributselektor mit

Beispiele kombiniert wird:

Angesichts der folgenden Auszeichnungs

<input required name="name" type="text" /> 

folgendes gilt für jQuery

$('[required="required"]').filter(':visible').length == 0; //true 
$('[required="required"]:visible').length == 0; //false - why does jquery find the input? 

Das Attribut disabled zeigt ein ähnliches Verhalten. Allerdings Datenattribute zeigen nicht das gleiche Verhalten:

mit dem folgenden Markup

<input data-boolean name="name" type="text" /> 

Das folgende gilt für jQuery

$('[data-boolean="true"]').filter(':visible').length == 0; //true 
$('[data-boolean="true"]:visible').length == 0; //true 

Hier ist ein Link zu einem fiddle dass demonstriert das Problem.

Ich würde nicht [required = "required"] erwarten, um ein Element mit einem leeren required -Attribut zu vergleichen, und es wird nicht als Selektor verwendet, aber wenn es mit dem: visible-Selektor gepaart wird . Warum ist das?

Answer 1

Die Ursache des Unterschieds scheint zu sein, dass Sizzle (der nicht native Selektorcode in jQuery) mit booleschen Attributen wie required übereinstimmt, wenn ein expliziter Test für den formalen Standardattributwert durchgeführt wird. Der native Code querySelectorAll() ist jedoch nicht, es sei denn, das Attribut hatte tatsächlich den Wert im ursprünglichen HTML.

Boolesche Selektoren wie required oder readonly können in HTML ohne Wert ausgedrückt werden, aber das bedeutet, dass der Wert als Attributname selbst zu nehmen ist.

Wenn Sie eine Pseudo-Klasse wie :visible verwenden, erkennt Sizzle, dass der native Code nicht funktioniert, so übernimmt es. Es ist nicht der :visible Test selbst, der das Problem verursacht; Sie erhalten den gleichen Effekt mit :text oder einer anderen von Sizzle unterstützten Erweiterung (und die den Sinn des Selektors offensichtlich nicht ändert).

Persönlich würde ich dies als einen Fehler betrachten, obwohl es etwas schwierig zu beheben sein kann, da der Attributwert wirklich als required gemeldet wird, wenn der DOM-Knoten über getAttribute() abgefragt wird.

Wenn HTML-Code war sorgfältig mit den Attributen vollständig angegeben geschrieben werden:

<input required=required ...> 

dann gäbe es keinen Unterschied wahrgenommen, aber das scheint ein wenig lästig.