Question

I have a jQuery selector:

div div ul li.normal a, div div ul li.massive a

Is there a logically equivalent selector like this:

div div ul (li.normal, li.massive) a

Any better solution than:

$('div div ul li').filter('.normal, .massive').find('a')

Answer 1

It’s really personal preference, and involves details about what you think may change in your application over time. If I expect the two selectors to diverge in the future, I may keep them completely separate using a comma, like so:

$('div div ul li.normal a, div div ul li.massive a')

However, if there isn’t any plan to change the structure, your example in the question would work great.

If you’re ever in doubt about the speed of a selector, you could put some timing code around it and compare which selector is faster.

The Multiple Attribute Selector is basically the jQuery selector equivalent of an OR. In the documentation it says:

Selects the combined results of all the specified selectors.

It can be used in any combination of element selectors, class selectors, id selectors, attribute selectors, etc.

Thus, if you wanted to adhere 100% to the DRY principle, your example appears to be the most simplified version:

// -----------------------[ normal || .massive ]--------
$('div div ul li').filter('.normal, .massive').find('a')