3

I have several elements on the html page, I call them through javascript like this:

$('#element_1_value')
$('#element_2_value')
$('#element_3_value')
$('#element_4_value')
$('#element_5_value')
.....

Now i have to create a single click event for all elements . How i can do this through regex.

mu is too short
  • 426,620
  • 70
  • 833
  • 800
Shehzad Bilal
  • 2,535
  • 2
  • 18
  • 27

3 Answers3

18

Here are four different ways to approach the problem:

Option #1: You can put them all into one selector:

$("#element_1_value, #element_2_value, #element_3_value, #element_4_value, #element_5_value").click(function() {
    // your code here
})

Option #2: Even better would be to assign a common class to all of them:

<div id="element_1_value" class="valueCommon">
<div id="element_2_value" class="valueCommon">
...

And, then use this:

$(".valueCommon").click(function() {
    // your code here
})

Option #3: It's also possible to write selectors for what id's that start and end with a given string, but I wouldn't recommend this because it requires the selector engine to examine every single object in the page that has an id attribute which isn't the fastest way of doing things:

$("[id^='element_']").filter("[id$='_value']").click(function() {
    // your code here
})

Option #4: I'm not aware of any built-in jQuery support for regex matches in selectors. You can use a filter function where any arbitrary javascript could examine and object to decide if it matched of not, but the only way to use that with a regex would require creating a jQuery object of all objects in the page with an id and then running the filter on each one. That could work, but is certainly not the most effective way to do things. Using a common class allows the browser to optimize your queries much more than the regex filter.

A regex match would look like this:

$("[id]").filter(function() {
    return(this.id.match(/element_\d+_value/) != null);
});

This creates a jQuery object of all objects in the page that contain an id attribute and then compares each one to the regex, removing any element that doesn't match. As I've said earlier, I would not recommend this for performance reasons.

jfriend00
  • 683,504
  • 96
  • 985
  • 979
  • In which case, just assign a class to all of them and use the `.` selector like mentioned in the answer. – techfoobar Jan 10 '12 at 06:57
  • class is an another option,, but is there any way to use regex – Shehzad Bilal Jan 10 '12 at 06:59
  • @ShehzadBilal - I added comments to the end of my answer about regex. It's not the best way to do it. – jfriend00 Jan 10 '12 at 07:03
  • @ShehzadBilal - I'm just curious why you chose the answer you did when I've offered you four different ways to do this including the regex method you originally asked for and including all the other ones mentioned here. Is this not a more complete answer or what did I miss? – jfriend00 Jan 10 '12 at 07:10
3

You can use the starts with selector:

$('div[id^="element_"]').each(function()
{
    alert("clicked!");
});

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

dearlbry
  • 3,193
  • 2
  • 23
  • 23
  • its not only beginning with element_ but also have to be end with _value – Shehzad Bilal Jan 10 '12 at 06:58
  • I would agree with the others that you're probably better off using a class. The only way that I could see of using a regex would be to iterate through each element, which is clearly not a good solution – dearlbry Jan 10 '12 at 07:03
1

Why dont you use Class instead of ID? For example: all your elements above have "your_class_name" class, and what you have to to is:

$(".yourclass_name").click(function() {
  // do it your-self
});
Bon Espresso
  • 693
  • 3
  • 5