Find all elements based on ids using regex on jQuery selector

Question

I've got several elements with unique ids like so:

<div id='item-1-top'></div> <div id='item-2-top'></div> <div id='item-3-top'></div> 

I was hoping that the following would work using jQuery:

$("#item-[.]+-top").each(function() {   $(this).hide(); }); 

I do not have a good grasp of regular expressions and I would appreciate some input, as the above appears to be incorrect.

Answer 1

If you were doing this with regex, the expression would simply be:

item-\d-top 

Where the \d indicates any single digit (0..9), and the other characters have no special meaning (so are treated as literals).

However, jQuery doesn't currently have a regex filter (only things like start/end/contains/etc) - so you would have to create your own one (which is possible, but if you were considering that you should stop and consider what/why you're filtering and figure out if there's a better way first).

Much simpler would be to create a class (as serg555 suggests), since that's exactly how you're treating these items.

Or (if you can't change the markup to add the class) then use the existing filters, expanding on g.d.d.c's answer, I might do:

$('div[id^=item-][id$=-top]').hide() 

(Since you may have multiple items ending with just 'top', either now or in future, so you need to be more specific to avoid unintentionally hiding other things.)

Answer 2

If the id was something like news-top-1, news-top-2, news-top-3, news-top-4 etc. then the selectors would have helped you.

http://api.jquery.com/attribute-starts-with-selector/

$.each( $("input[name^='news-top-']"), function () {   alert( $(this).hide() ); });