Find all elements based on ids using regex on jQue

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

Hit a similar problem and liked/upvoted serg's answer of creating class instead but then because I was doing multiple operations on such elements, Keyed Collections were more suitable.

Answer 3

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

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

Answer 5

James Padolsey created a wonderful filter that allows regex to be used for selection.

jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ? 
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^s+|s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

Now you can use

$('div:regex(id,item-[0-9]-top)').hide()