javascript - regular expression in name id or class? - Stack Overflow

admin管理员组

文章数量:1425717

i have for example:

<span id="name1">name1</span>
<span id="name2">name2</span>
<span id="name3">name3</span>
<span id="name4">name4</span>
<span id="name5">name5</span>

i must use:

$("#name1").click(function(){
    $(this).css('background-color', 'red');
});
$("#name2").click(function(){
    $(this).css('background-color', 'red');
});

etc

i would like somethings:

$("#name  [1-5] ").click(function(){
    $(this).css('background-color', 'red');
});

i dont will add class. i would like make this for id and regular expression.

i have for example:

<span id="name1">name1</span>
<span id="name2">name2</span>
<span id="name3">name3</span>
<span id="name4">name4</span>
<span id="name5">name5</span>

i must use:

$("#name1").click(function(){
    $(this).css('background-color', 'red');
});
$("#name2").click(function(){
    $(this).css('background-color', 'red');
});

etc

i would like somethings:

$("#name  [1-5] ").click(function(){
    $(this).css('background-color', 'red');
});

i dont will add class. i would like make this for id and regular expression.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Aug 16, 2011 at 11:29 Moitrade MoitradeMoitrade Moitrade 13311 gold badge22 silver badges99 bronze badges

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 4

You have a few options:

1. Use a class. It's easy to add, and is exactly the right use for them in this instance. It will also be fastest.

2. Use a loop:

   for(var i = 1; i <= 5; i++) { $("#name" + i).click(function(){ $(this).css('background-color', 'red'); }); }

3. Use attribute selectors: $('span[id^="name"]') That will grab all spans with an id that starts with "name". Just know, this is the slowest option, so I would avoid it if you can.

You can use the attribute startsWith selector to match IDs (or any attribute values) beginning with something.

$("span[id^='name']").click(function(){
    $(this).css('background-color', 'red');
});

Demo.

$("span").filter(function(){
    return /name[1-5]/.test($(this).attr('id'));
}).click(function(){

});

Isnt it possible to use span as a selector? You probably need to be more specific by, for example, passing the parents class too: .parentClass span.

If those are your only span elements, you could do something like

$('span').each(function(i) {
    $(this).click(function() { $(this).css('background-color', 'red'); }
});

or if they are the only elements whose ids start with "name" you could use the jQuery "starts with" selector

$('[id ^= "name"]').each(function(i) {
    $(this).click(function() { $(this).css('background-color', 'red');
});

You could just construct the string you are using for the $-selection in a loop like

for (var i = 1; i < 6; i++){
var sel = '#name'+i;
$(sel).doWhatever();
}

Although I still think that somehow selecting them in a jQuery way (something like $('#parentElement').find('span')) or using a class might be the better solution

The answers above are OK, but I actually think that if you can add a class, you should. That's what classes are for - marking the similar / related elements.

If you have just a couple of IDs/classes, you should user '#id1, #id2, ...' selector

If you have multiple, you have to add the class for the sake of semantical and maintainable code and markup

本文标签： javascriptregular expression in name id or classStack Overflow