jquery regex selector

Question

I want to select some html elements with name starting with btn (btn1, btn2..)

what is the most efficiant way to do that

I try http://james.padolsey.com/javascript/regex-selector-for-jquery/ but dont manage to make it work

$(':regex(class,btn[0-9]').hover( function(){

// not selecting any "btn" class

}

Eli · Accepted Answer · 2013-09-25 20:01:43Z

30

If you want to select all elements that have a class attribute that starts with the word btn:

$( '[class^=btn]' )

If you want to use the name attribute instead, just swap out the attribute:

$( '[name^=btn]' )

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

edited Sep 25, 2013 at 20:01

answered Apr 20, 2011 at 16:56

Eli

17.8k4 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Talljoe Over a year ago

This is a much better answer. Regex is expensive. Edited to answer the question more directly.

Code Maverick · Accepted Answer · 2014-03-14 15:51:43Z

5

What you are doing is selecting all elements with the class of btnX where X could be 0-9.

To do this with the name attribute starting with "btn" you need to use:

$(':regex(name,^btn)').hover(function() { ... }, function() { ... });

-- EDIT to include working jsFiddle demo --

Also, don't forget to put this on your page:

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

edited Mar 14, 2014 at 15:51

answered Apr 20, 2011 at 17:14

Code Maverick

20.5k12 gold badges65 silver badges117 bronze badges

4 Comments

Nico AD Over a year ago

thanks , I dont know what I was missing maybe the ^ before btn

Code Maverick Over a year ago

@N-AccessDev - You were using $(':regex(class,btn[0-9])') which is looking for all HTML elements that have a class with the name of btn0 through btn9. Mine uses $(':regex(name,^btn)') which is looking for all HTML elements that have a name starting with btn.

Code Maverick Over a year ago

@N-AccessDev - That said, I do agree with Eli that the :regex way of going about things is going to be a lot slower than just using the right selector. However, he is wrong in his answer, as you were looking for all HTML elements that start with the name of "btn". Which means that you should use $('[name^="btn"]'). That would be the most efficient way of selecting those particular elements.

Nick.T Over a year ago

This regex version really helps me out here as I need to select objects that have a specific format with variables in it. Thanks for the tip.

Talljoe · Accepted Answer · 2011-04-20 16:56:33Z

1

I doubt regex is the most efficient way to do it, but did you add the regex selector to your code? :regex is not a built-in selector so you need to include the snippet at the top of your article in your script.

answered Apr 20, 2011 at 16:56

Talljoe

14.8k4 gold badges45 silver badges39 bronze badges

Collectives™ on Stack Overflow

jquery regex selector

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related