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对象，然后将每个对象与正则表达式进行比较，删除任何不匹配的元素。正如我之前所说，出于性能原因，我不建议这样做。

Answer 2

您可以使用带选择器的开头：

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

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

Answer 3

为什么不使用 Class 而不是 ID ？例如：上面的所有元素都有“ your_class_name ”类，您需要的是：

$(".yourclass_name").click(function() {
  // do it your-self
});

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

3 个答案: