9

シナリオ：

2つのjQuery式を取得しました：

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

selectつまり（簡単にするために、ドキュメントには1つしかないと仮定しましょう）：

  • A：を取得し、。という名前の属性を持つselectすべての子孫を検索します。optionselected
  • B：を取得しselect、すべての子孫を検索しoptionてから、という名前の属性を持つユーザーでフィルタリングしますselected。

期待される動作：

AとBは同じ結果になるはずです。

実際の動作：

ユーザーがドロップダウンで選択を変更した後、

  • Aは、デフォルトで選択されているを返しますoption。
  • Bは新しく選択されたを返しますoption。

質問：

では、なぜそれらは異なるのですか？CSSセレクターについての私の理解は間違っていますか？

ライブデモ：

ライブデモはこちら です。

ソースコード：

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]'));
    });
});

テスト結果：

+---------------------------+--------------+---------------------+---------+-----+
|          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 |
+---------------------------+--------------+---------------------+---------+-----+
  • defaultは、選択されたデフォルトを返すことを意味しますoption。
  • newは、新しく選択されたを返すことを意味しますoption。

ご覧のとおり、IE6を除くすべてのブラウザーで異なる結果が得られます。

4

5 に答える 5

3

Sizzleエンジンは、元の（デフォルトの）値を含む属性ではなく、要素（現在の値を含む）のselected プロパティをチェックします。

https://github.com/jquery/sizzle/blob/master/sizzle.js#L788を参照してください

私がまだ理解していないのは、2番目のセレクターが明らかにSizzleを呼び出す理由ですが、最初のセレクターはそうではないようです。

いずれにせよ、プロパティは属性ではなくチェックする必要があるものであるため、:selected疑似セレクターを使用する必要があります。[selected]

于 2012-10-30T11:37:25.807 に答える
1

あなたが書くとき、それはあなたがプロパティを持っていてあなたがそれをコード化する ならばあなたが使うべきである代わりに属性/プロパティoption[selected]を検索しますselectedoption:selectedreadonlyoption[readonly]s

$（'[attribute]'）は、指定された属性を持つ要素を任意の値で選択します。
詳細情報：属性セレクター[名前]があります

フィドル

<select>
 <option value='p'>p</option> 
 <option value='q' selected>q</option>
 <option value='r'>r</option> 
 <option value='s' readonly>s</option> 
</select>
于 2012-10-30T11:20:43.567 に答える
1

式は何を返す必要がありますか？

[selected]selected属性を持つすべての要素を任意の値（参照： W3C、jQuery）で照合します。

結果に一貫性がないのはなぜですか？

ここでjQueryにバグレポートを送信しました。これは、現在修正されている別のバグレポートの複製としてマークされています。

解決策はありますか？

現在の選択を取得するには：

:selectedセレクターを使用します（ライブデモはこちら）：

$('select').find('option').filter(':selected'); /* Supposedly faster */
or
$('select').find('option:selected');            /* Supposedly slower */

docによると、2番目の式はおそらく遅いことに注意してください。

:selectedはjQuery拡張機能であり、CSS仕様の一部ではないため、を使用するクエリは、ネイティブDOMメソッドによって提供されるパフォーマンスの向上を利用できませ:selectedん。querySelectorAll()

デフォルトの選択を取得するには：

jQuery 1.9以降の場合、質問のように任意の式を使用します。

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

jQuery 1.6以降の場合は、プロパティを利用しdefaultSelectedます（ライブデモはこちら、参照：w3schools、Mozilla、MSDN、MSDN）：

$('select').find('option').filter(function() {
    return $(this).prop('defaultSelected');
});
于 2012-11-07T02:39:59.317 に答える
0

これは、ブラウザによってDOMがどのように構築されるかによって異なりますoption[selected]。jQueryを使用して、選択された属性を持つオプション要素を検索しますが、場合によっては適用されません。

あなたは使用する必要があります

SelectObj.children(':selected')
于 2012-10-30T11:19:31.850 に答える
0

あなたの実装は間違っていますそれはそうではありません

find('option[selected]')

そのはず、

SelectObj.find('option:selected')

編集されたフィドルは次のとおりです。

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

および参照：

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

于 2012-10-30T11:22:33.913 に答える