jQuery selectors do not handle #id correctly in sub-trees

[andreryan908@…]

jQuery does not select the same elements as querySelectorAll when given the same CSS selector string. Specifically, it does not handle the case where the selector contains a #id referring to an element above (or the root of) the sub-tree given as the context parameter of the jQuery search.

var w = document.createElement('div');
var x = document.createElement('div');
var y = document.createElement('div');
var z = document.createElement('div');
var match = x.mozMatchesSelector || x.webkitMatchesSelector || function() { return 'fail'; };

x.id = 'Hello';
x.appendChild(y);
z.className = 'blah';
y.appendChild(z);

console.log($('#Hello .blah', y).length); // prints '0'
console.log(y.querySelectorAll('#Hello .blah').length); // prints '1'
console.log($(z).is('#Hello .blah')); // prints 'true'
console.log(match.call(z, '#Hello .blah')); // prints 'true'

w.appendChild(x);
console.log($('#Hello .blah', x).length); // prints '0'
console.log(x.querySelectorAll('#Hello .blah').length); // prints '1'
console.log($('#Hello .blah', w).length); // prints '1'
console.log(w.querySelectorAll('#Hello .blah').length); // prints '1'

I especially want to emphasise that $(node).is(sel) says the selector DOES match and yet the normal jQuery(sel, node.parentNode) fails to do so.

(Confirmed in Firefox 14 and Chrome 20)

[timmywil]

Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket.

Additionally, be sure to test against the jQuery Edge version to ensure the issue still exists. To get you started, use this boilerplate:  http://jsfiddle.net/FrKyN/. Open the link and click to "Fork" (in the top menu) to get started.

[timmywil]

Looking closer at your examples, this is intended behavior. See  http://ejohn.org/blog/thoughts-on-queryselectorall/ for further explanation.