在jquery元素选择中使用正则表达式

Question

我在html页面上有几个元素,我通过这样的javascript调用它们:

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

现在我必须为所有元素创建单击事件.我如何通过正则表达式来做到这一点.

Answer 1

以下是解决问题的四种不同方法:

选项#1:您可以将它们全部放入一个选择器:

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

选项#2:更好的方法是为所有人分配一个公共类:

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

然后,使用这个:

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

选项#3:也可以为使用给定字符串开始和结束的id编写选择器,但我不建议这样做,因为它要求选择器引擎检查页面中具有id属性的每个单个对象.做事的最快方式:

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

选项#4:我不知道任何内置的jQuery支持选择器中的正则表达式匹配.您可以使用过滤器函数,任何任意javascript可以检查和反对它是否匹配,但是使用正则表达式的唯一方法是创建一个带有id的页面中所有对象的jQuery对象,然后运行每个过滤器.这可能有效,但肯定不是最有效的做事方式.使用公共类允许浏览器比正则表达式过滤器更优化您的查询.

正则表达式匹配看起来像这样:

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

这将创建页面中包含id属性的所有对象的jQuery对象,然后将每个对象与正则表达式进行比较,删除任何不匹配的元素.正如我之前所说,出于性能原因,我不建议这样做.