Question

我有例如：

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

我必须使用：

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

等

我想要一些事情：

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

我不会添加课程。我想为id和正则表达式做这个。

Answer 1

您可以使用attribute startsWith selector来匹配以某些内容开头的ID（或任何属性值）。

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

Demo.

Answer 2

您有几个选择：

使用课程。它很容易添加，在这种情况下它们正是它们的正确用途。它也将是最快的。
使用循环：

for（var i = 1; i＆lt; = 5; i ++）{ $（“＃name”+ i）.click（function（）{ $（this）.css（'background-color'，'red'）; }）; }
使用属性选择器：$('span[id^="name"]')这将获取ID为以“name”开头的所有跨度。要知道，这是最慢的选择，所以如果可以，我会避免它。

Answer 3

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

});

Answer 4

是否可以使用span作为选择器？您可能需要更具体，例如，传递父类：.parentClass span。

Answer 5

如果这些是您唯一的跨度元素，您可以执行类似

的操作

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

或者如果它们是唯一以id为“name”的元素，则可以使用jQuery“starts with”选择器

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

Answer 6

你可以在像

这样的循环中构造你用于$ -selection的字符串

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

虽然我仍然认为以某种方式以jQuery方式选择它们（比如$（'＃parentElement'）。find（'span'））或使用类可能是更好的解决方案

Answer 7

上面的答案还可以，但我实际上认为，如果可以添加一个类，那么应该。这就是类的用途 - 标记相似/相关的元素。

如果您只有几个ID /类，则应该使用'＃id1，＃id2，...'选择器

如果你有多个，你必须为了语义和可维护的代码和标记添加类

名称id或类中的正则表达式？

7 个答案: