jQuery Selectors Watch-out!

You might be tempted to extend jQuery selectors and implement a set of your own custom selectors as I did, first I have to admit that it’s a very powerful feature of jQuery that enabled me to separate some of the UI-related logic into a separate JS file, but after defining over 15 custom selectors, I have reached to a weird situation…

before telling what was the poblem, let me give you a brief about what I was trying to do;

I have a set of divs, each div contains some data related to some people (name, age, marital status, …etc), and I have defined some custom selectors using jQuery to simplify filtering these people like :ageRange(min, max) will selects all people within a specific age range.

Till now everything is working perfectly, but when I tried to implement a custom selector that selects people depending on their last visit :lastVisit(min, max) something went wrong!

my custom selector is not being called!

After a couple of hours of debugging trying to find out where things have gone wrong, I have reached to the following conclusion:

using :lastVisit(min, max) was interfering with every jQuery built-in selector that has a :last prefix,
it seems that jQuery checks for the begging of every selector name and not the whole name,
so watch out to define your custom selector starting with jQuery’s built-in selector names like :last, :has, :not ... etc

you can check the whole list of jQuery’s built-in selectors here

follow me on:

awesome icons by WPZOOM

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s