29

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.

HoldOffHunger
  • 10,963
  • 6
  • 53
  • 100
Steven Cheng
  • 1,041
  • 3
  • 14
  • 25

6 Answers6

43

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.)

Community
  • 1
  • 1
Peter Boughton
  • 102,341
  • 30
  • 116
  • 172
  • Thanks Peter/serg555. I tried the above e.g. and it worked a treat. It's more a case of curiosity but as serg555 suggests, using a class would be much simpler. Thanks again! – Steven Cheng Jun 22 '10 at 07:43
14

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() );
});
Xaerxess
  • 25,634
  • 7
  • 81
  • 101
Hari K T
  • 3,864
  • 3
  • 28
  • 50
8

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

serg
  • 103,023
  • 70
  • 299
  • 324
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()
vijaykumar
  • 3,964
  • 6
  • 37
  • 51
0

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.

gawkface
  • 1,173
  • 16
  • 21
-1

[id^='startidText'] will match id in which text start id.

[id$='endIdText'] will match id in which text end id.

[id*='matchIdtext'] will match id anywhere it is in the strig.

looking at the post below can also help , that wher i learnt this little neet trick querySelector, wildcard element match?

Daniel Ifechukwu
  • 35
  • 7