Unterschied zwischen find('option[selected]') und find('option').filter('[selected]')

Szenario:

Ich habe 2 jQuery-Ausdrücke:

/* A */ $('select').find('option[selected]');
/* B */ $('select').find('option').filter('[selected]');

das bedeuten (angenommen, es gibt nur eine select im Dokument, der Einfachheit halber):

Eine: Holen Sie sich die select, dann finden Sie alle option Nachkommen, die hat ein Attribut mit dem Namen selected.
B: Holen Sie sich die select, dann finden Sie alle option Nachkommen, dann der filter von denen, die hat ein Attribut mit dem Namen selected.

Erwartete Verhalten:

Eine und B sollte das gleiche Ergebnis.

Tatsächliche Verhalten:

Nachdem der Benutzer verändert die Auswahl in der dropdown-Liste auswählen,

Eine gibt die Standard ausgewählt option.
B gibt die neue ausgewählt option.

Frage:

Also, warum sind Sie unterschiedlich? Ist mein Verständnis über CSS-Selektoren falsch?

Live-Demo:

Live-demo ~~hier~~ hier.

Source Code:

HTML:

<select>
 <option value='p'>p</option> 
 <option value='q' selected>q</option>
 <option value='r'>r</option> 
 <option value='s'>s</option> 
</select>


<input type='button' value='click me!'/> <br/> 
 ResultA : <span id='ResultA'>
    here
</span> <br/> 
 ResultB : <span id='ResultB'>
    here
</span> <br/>

Javascript:

function SetResult(ResultObj, ElementObj) {
    ResultObj.text("length=" + ElementObj.length + " " + "val()=" + ElementObj.val());
}

$(function() {
    $('input[type=button]').click(function() {
        var SelectObj = $('select');
        SetResult($("#ResultA"), SelectObj.find('option[selected]'));
        SetResult($("#ResultB"), SelectObj.find('option').filter('[selected]'));
    });
});

Testergebnis:

+---------------------------+--------------+---------------------+---------+-----+
|          Browser          | Environment  |       jQuery        |    A    |  B  |
+---------------------------+--------------+---------------------+---------+-----+
| Chrome 22.0.1229.94m      | Win7         | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Chrome 23.0.1271.64 m     | Win7         | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Firefox 15.0.1            | Win7         | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Firefox 16.0.2            | Win7         | 1.8.2, 1.7.2, 1.6.4 | default | new |
| IE 6                      | WinXP        | 1.8.2, 1.7.2, 1.6.4 | *new*   | new |
| IE 9                      | Win7         | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Opera 12.02               | Win7         | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Opera 12.10               | Win7         | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Safari 5.1.7 (7534.57.2)  | Win7         | 1.8.2, 1.7.2, 1.6.4 | default | new |
+---------------------------+--------------+---------------------+---------+-----+
| Chrome 22.0.1229.94       | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Chrome 23.0.1271.64       | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Firefox 13.0              | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Firefox 14.0.1            | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Firefox 16.0.2            | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Opera 12.01               | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Opera 12.10               | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Safari 6.0.1 (7536.26.14) | MacOS 10.7.5 | 1.8.2, 1.7.2, 1.6.4 | default | new |
+---------------------------+--------------+---------------------+---------+-----+
| Chrome 21.0.1180.82       | iOS 4.3.5    | 1.8.2, 1.7.2, 1.6.4 | default | new |
| Opera 7.0.5               | iOS 4.3.5    | 1.8.2               | default | new |
| Safari                    | iOS 4.3.5    | 1.8.2, 1.7.2, 1.6.4 | default | new |
+---------------------------+--------------+---------------------+---------+-----+

Standard bedeutet, es gibt die Standard ausgewählt option.
neue bedeutet, es gibt die neue ausgewählt option.

Wie Sie sehen können, alle Browser außer IE6 geben unterschiedliche Ergebnisse.

Ihr Verständnis von CSS-Selektoren solide scheint. Aber jQuery nicht immer base-Selektoren, die auf der source-markup. Dies ist besonders wahr, ich habe gefunden, für die Attribut-Selektoren mit den Werten, die sich ändern können. Keine Ahnung, warum jQuery behandeln würde, diese uneinheitlich, obwohl.
Anmerkung: die Verwendung von option:selected statt option[selected] für die #ResultA wird die gleiche Ausgabe erzeugen wie #ResultB.
Ich fange an, wirklich, wirklich hasse Brutzeln viel.
Es gab ein Problem mit diesen Selektoren nicht wieder den gleichen Wert in jQuery Versionen älter als 1.7 - finden Sie diese bug report

InformationsquelleAutor Pang | 2012-10-30

3

Die Sizzle engine prüft die selected Eigenschaft eines Elements (enthält die aktuellen Wert), sondern das Attribut enthält das ursprüngliche (Standard -) Wert.

Sehen https://github.com/jquery/sizzle/blob/master/sizzle.js#L788

Was ich hab noch nicht herausgefunden, weshalb Ihre zweite Auswahl scheinbar ruft Brutzeln, aber der erste scheint nicht zu.

In jedem Fall, die Eigenschaft ist das, was Sie überprüfen sollten Sie, anstatt das Attribut, so dass Sie sollten mit den :selected pseudo-Selektor, und nicht [selected]
- dmethvin erklärt den Unterschied in der dieses Problem: das problem der :selected gehen durch den JavaScript-Weg von Brutzeln und suchen eine Eigenschaften, in der Erwägung, dass [selected] geht durch die querySelectorAll Weg und sieht Sie an Parametern. (Es sei denn, es gibt einige andere nicht-qSA-Selektor in der Zeichenfolge, wie [selected]:first.)
- in der Tat, außer, dass ich den debugger und festgestellt, dass .filter('[selected]') nicht durch die :selected Brutzeln code. Seltsam...
InformationsquelleAutor Alnitak
1

beim schreiben option[selected] Sie werden Suche für die selected Attribut/Eigenschaft
anstatt, dass Sie verwenden sollten option:selected
wenn Sie readonly - Eigenschaft, und geben Sie den code option[readonly] es zurück s

$('[Attribut]') wird selektiert Elemente, die das angegebene Attribut mit einem Wert.

weitere Informationen : Has Attribute Selector [name]

Fiddle
```
<select>
 <option value='p'>p</option> 
 <option value='q' selected>q</option>
 <option value='r'>r</option> 
 <option value='s' readonly>s</option> 
</select>  
```
InformationsquelleAutor Pragnesh Chauhan
1

Was sollen die Ausdrücke zurück?

[selected] findet alle Elemente, die eine selected Attribut mit einem Wert (Referenzen: W3C, jQuery).

Warum sind die Ergebnisse inkonsistent?

Ich eingereicht haben, einen bug-report zu jQuery hier. Es wird als Duplikat gekennzeichnet von ein weiterer bug-report die nun behoben.

Irgendwelche Lösungen?

Um die aktuellen Auswahl:

Verwenden Sie die :ausgewählt - Auswahl (live-demo hier):
```
$('select').find('option').filter(':selected'); /* Supposedly faster */
or
$('select').find('option:selected');            /* Supposedly slower */
```
Beachten Sie, dass der 2. Ausdruck ist angeblich langsamer, nach der doc.

Weil :selected ist eine jQuery-Erweiterung und nicht Teil der CSS-Spezifikation Abfragen mit :selected keinen Vorteil aus performance-Schub, bereitgestellt durch die native DOM querySelectorAll() Methode.

Um die Standard-Auswahl:

Für jQuery 1.9+, verwenden Sie einen der Ausdrücke wie in der Frage, d.h.
```
/* A */ $('select').find('option[selected]');
/* B */ $('select').find('option').filter('[selected]');
```
Für jQuery 1.6+, nutzen Sie die defaultSelected Eigenschaft (live-demo hier, Referenzen: w3schools, Mozilla, MSDN, MSDN):
```
$('select').find('option').filter(function() {
    return $(this).prop('defaultSelected');
});
```
InformationsquelleAutor Pang
0

Diese hängt davon ab, wie der DOM aufgebaut ist, die durch den browser.. mit option[selected] jQuery suchen für ein option-element das ausgewählte Attribut, das in einigen Fällen nicht angewendet

Sollten Sie verwenden
```
SelectObj.children(':selected')
```
- .filter('[selected]') Filter Optionen für das ausgewählte Attribut zu... Die Frage ist, warum.
- Fragen Sie John Resig 🙂
InformationsquelleAutor Matei Mihai
0

Ihre Umsetzung ist falsch, es ist nicht
```
find('option[selected]')
```
Sollte es sein,
```
SelectObj.find('option:selected')
```
Hier ist die bearbeitete fiddle:

http://jsfiddle.net/ugXtx/6/

und Referenz:

http://api.jquery.com/selected-selector/

InformationsquelleAutor Vivek S

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.