背景

HTMLで、ID属性の値はページ内で一意である必要があります。重複してはいけません。
http://www.html5.jp/tag/attributes/id.html

しかし、JavaScriptライブラリを使うとIDが重複してしまう場合があります。
たとえば、FixedMidashiというテーブルのヘッダを固定するライブラリでは、対象のテーブルをコピーして固定するヘッダ部分を作成します。対象テーブル内の要素にIDが指定されていると、IDが重複しまいます。

工夫すればIDがユニークになるように実現できますが、FixedMidashiを使った場合は「IDが重複している」ことを諦めた方がラクでした。

そこで、IDが重複している場合の動きをまとめます。
以下のようなHTMLで動作を確認します。

sample.html

<div id="bar">
  #bar 1個目
  <p>Pタグ</p>
</div>

<div id="bar">
  #bar 2個目
  <p>Pタグ</p>
</div>

環境

console

document.querySelectorAll("#bar").length; //⇒ 2
$("#bar").length; //⇒ 1

$("#bar p").length; //⇒ 2
document.querySelectorAll("#bar p").length; //⇒2

document.querySelectorAllとjQueryで取得できる件数に違いありました。
jQueryは「IDはユニーク」という前提を考慮した結果を返すのに対して、document.querySelectorAllは考慮していませんでした。
#bar pのようにIDが指定された要素の子孫を指定した場合、jQueryは「IDはユニーク」という前提を考慮していませんでした。ハマったところです。

sample.css

#bar { /* 重複しているIDを指定 */
  color:red;
}