Find all elements based on ids using regex on jquery selector

Question

Hi,

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've not got a good grasp of regex and would appreciate some input please as the above appears to not be correct.

Thanks Steve

Answer 1

Try this:

$('div[id$=top]').hide();

That should get it I believe.

Answer 2

I would assign some class to them like item and then do a search by this class $(".item").

Answer 3

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 4

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() ); });