Response title
This is preview!
jQuery traversal functions should conform to standard CSS selectors
in Developing jQuery Core
•
12 years ago
Each jQuery object has a selector property - the accumulated selector strings that were used to query the DOM for the nodes inside it. Here's a few examples:
As far as I can see, there is no need for the selector to break with standard CSS, as the jQuery traversal functions (that I've tested so far) have CSS selector equivalents. For example:
- $('elem.class').selector; // "elem.class"
- $('elem .class').selector; // "elem .class)"
However, when traversal functions are used on the jQuery object, the selector property is updated, but is often no longer a valid CSS selector:
- $('elem').filter('.class').selector; // "elem.filter(.class)" - invalid CSS selector
- $('elem').children('.class').selector; // "elem.children(.class)" - invalid CSS selector
- $('elem').eq(0).selector; // "elem.slice(0,1)" - invalid CSS selector (eq() uses the internal .slice() function)
- $('elem').add('.class').selector; // "" - gone completely! Invalid CSS selector
And sometimes it is:
- $('elem').find('.class').selector; // "elem .class" - valid CSS selector
- $('elem').filter('.class') - "elem.filter(.class)" - could be "elem.class"
- $('elem').children('.class') - "elem.children(.class)" - could be "elem > .class"
- $('elem').eq(0) - "elem.slice(0,1)" - could be "elem:nth-child(0)"
- $('elem').add('.class') - "" - could be "elem, .class"
This is a small thing, but it would allow more complete interchangeability and standards-compliance between jQuery and CSS. I have already come up against this problem before - writing a plugin to create css rules in a <style> element through script.
There are some traversal functions that might be tricky to make valid CSS selectors from, like .parent(), but, on the whole, it should be possible and easy enough to standardise them.
1