Geek Answers Handbook

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

In modern browsers, jQuery uses document.querySelectorAll() to improve performance when using the correct CSS selectors. It returns to Sizzle if the browser does not support the selector or the document.querySelectorAll() method.

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

A cheap hack that I can use is to abandon the non-standard extension of the jQuery selector , thereby “invalid” the selector, so to speak, For example, if we assume that every li:nth-last-child(2) visible , I can just delete it by turning this:

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

In it:

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

This makes him always value Sizzle. In addition, this requires me to make assumptions about page elements that may or may not be true. And I really don't like it. Not to mention the fact that I do not like the use of non-standard selectors in general, if this is 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 the selector instead, which preferably does not use the use of non-standard selectors? This is probably due to calling another method instead of $() , but it is much better than a selector to crack IMO.

+7
source share
3 answers

You can simply set it to null before loading jQuery so that it does not assume that it is not supported:

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

It is supposed to do this to evaluate to false

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

Comment out the null line and try again, and you will see that it turns red.

+9
source

Since you are developing code for the selector yourself, could you just give it a non-standard name for the duration of the development cycle? Maybe this is a prefix for your own supplier or something else? -bolt-nth-last-child()

This way, you will find out that the browser will definitely not support it, so it should always be used by Sizzle.

When you finish the development cycle, you can refuse the -bolt- prefix.

I know that more work than the answer to the question, but this seems to be the easiest solution for me.

+3
source

It seems like jQuery.find is using sizzle by default. This will save you from destroying the environment by setting its own function for it.

https://github.com/jquery/jquery/blob/master/src/sizzle-jquery.js#L3

So, you should be able to do the following, and it will always go through hissing.

 $.find('li:nth-last-child(2)')
0
source

More articles:


All Articles