Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can I force jQuery to use Sizzle to evaluate a selector without using non-standard selectors?

In modern browsers, jQuery makes use of document.querySelectorAll() to boost performance when valid CSS selectors are used. It falls back to Sizzle if a browser doesn't support the selector or the document.querySelectorAll() method.

However, I'd like to always use Sizzle instead of the native implementation when debugging a custom selector. Namely, I'm trying to come up with an implementation of :nth-last-child(), one of the CSS3 selectors that are not supported by jQuery. Since this selector is natively supported by modern browsers, it works as described in the linked question. It is precisely this behavior that's interfering with debugging my custom selector, though, so I'd like to avoid it.

A cheap hack I can use is to drop in a non-standard jQuery selector extension, thereby "invalidating" the selector so to speak. For example, assuming every li:nth-last-child(2) is visible, I can simply drop that in, turning this:

$('li:nth-last-child(2)').css('color', 'red');

Into this:

$('li:nth-last-child(2):visible').css('color', 'red');

This causes it to always be evaluated by Sizzle. Except, this requires that I make an assumption of my page elements which may or may not be true. And I really don't like that. Not to mention, I dislike using non-standard selectors in general unless absolutely necessary.

Is there a way to skip the native document.querySelectorAll() method in browsers that support it and force jQuery to use Sizzle to evaluate a selector instead, that preferably doesn't employ the use of non-standard selectors? Likely, this entails calling another method instead of $(), but it's much better than a selector hack IMO.

like image 281
BoltClock Avatar asked Jul 31 '12 20:07

BoltClock


2 Answers

You could just set it to null before jQuery loads so it thinks it's not supported:

document.querySelectorAll = null;
//load jquery, will trigger not supported branch
//Optionally restore QSA here (save a reference) if needed

This is supposed to make this evaluate to false

Demo: http://jsbin.com/asipil/2/edit

Comment out the null line and rerun, and you will see it will turn red.

like image 78
Esailija Avatar answered Sep 30 '22 03:09

Esailija


Since you're developing the code for the selector yourself, could you not simply give it a custom name for the duration of the development cycle? Maybe give it your own vendor prefix or something? -bolt-nth-last-child()

That way, you'll know the browser definitely won't support it, so it should always fall into using Sizzle.

When you're done with the development cycle, you can drop the -bolt- prefix.

I know that's more of a work-around than an answer to the question, but it seems like the simplest solution to me.

like image 36
Spudley Avatar answered Sep 30 '22 03:09

Spudley