同じID値を持つ要素が複数ある場合、jQueryはどのように動作するのですか？

質問

GoogleのAdWordsサイトからデータを取得するのですが、そのデータには複数の要素に同じ id .

次の3つのクエリが同じ答え(2)にならない理由を教えてください。

ライブデモ

HTMLです。

<div>
    <span id="a">1</span>
    <span id="a">2</span>
    <span>3</span>
</div>

JSです。

$(function() {
    var w = $("div");
    console.log($("#a").length);            // 1 - Why?
    console.log($("body #a").length);       // 2
    console.log($("#a", w).length);         // 2
});

どのように解決するのですか？

同じIDの要素を2つ持つことは、W3Cの仕様によると、有効なhtmlではありません。

CSSセレクタがIDセレクタのみを持つ場合（そして特定のコンテキストで使用されない場合）、jQueryはネイティブの document.getElementById メソッドを使用し、その ID を持つ最初の要素のみを返します。

しかし、他の2つの例では、jQueryはSizzleセレクタエンジンに依存しています（あるいは querySelectorAll が利用可能な場合）、明らかに両方の要素が選択されます。結果はブラウザごとに異なる可能性があります。

しかし、同じページに同じIDを持つ2つの要素を持つことは決してあってはなりません。CSSで必要な場合は、代わりにclassを使用します。

どうしても重複したIDで選択しなければならない場合は、属性セレクタを使用します。

$('[id="a"]');

フィドルを見てみましょう。 http://jsfiddle.net/P2j3f/2/

注意 可能であれば、以下のようにタグセレクタでそのセレクタを修飾する必要があります。

$('span[id="a"]');