是否有标识符（id）的通配符选择器？

Question

如果我有未知数量的标识符共享特定的命名方案，有没有办法使用 jQuery 一次性获取它们？

// These are the IDs I'd like to select
#instance1
#instance2
#instance3
#instance4

// What do I need to add or how do I need to modify this jQuery selector in order to select all the IDs above?
("#instanceWILDCARD").click(function(){}

Answer 1

属性开头选择器 ('^=) 将适用于您的 ID，如下所示：

$("[id^=instance]").click(function() {
  //do stuff
});

但是，请考虑为您的元素提供一个公共类，例如（我自己笑了）.instance，并使用该选择器：

$(".instance").click(function() {
  //do stuff
});

Answer 2

如果您确实想要匹配类，而不是 id，则语法会稍微复杂一些，因为类可以有多个值。

// handle elements like <div class="someclass1"></div>
$('[class^="someclass"]').click(function() {
   // do stuff
});

// handle elements like <div class="foo someclass1"></div>
$('[class*=" someclass"]').click(function() {
   // do stuff
});

Answer 3

我很惊讶没有人提到创建自己的过滤器选择器（通过扩展 jQuery 的选择器功能）。在这里，我创建了一个名为“likeClass”和“likeId”的通配符选择器，它接受任何通配符字符串，并将查找所有匹配的元素（类似于正则表达式匹配）。

代码：

$.expr[':'].likeClass = function(match){
      return $('[class*=" '+ match +'"]');
};
$.expr[':'].likeId = function(match){
      return $('[id*=" '+ match +'"]');
};

示例用法：

现在假设您有多个名称相似的 div 元素，例如 .content-1、.content-2、.content-n... 等，并且你想选择它们。现在是蛋糕！

$('div:likeClass(content-)'); // 返回具有相似类名的所有元素：content-*

或

$('div:likeClass(content-)'); // 返回具有相似 ID 的所有元素：content-*

哦，是的，还有一件事......您也可以链接它。 ：）

$('li:likeId(slider-content-)').hide().addClass('sliderBlock').first().fadeIn('fast');

享受！

Answer 4

如果您有 jQuery，则不需要额外的 expr 或任何花哨的东西

jQuery('[class*="someclass"]').click(function(){
});

jQuery('[id*="someclass"]').click(function(){
});

如上所述： https://stackoverflow.com/a/2220874/2845401

Answer 5

这些是 ID，但您可以执行类似的操作：

$("[id^='instance']").click(...)

虽然这有点昂贵 - 如果您可以指定 a) 元素的类型或 b) DOM 中的一般位置，则会有所帮助，例如：

$("#someContentDiv span[id^='instance']").click(...)

[id ^='...'] 选择器基本上意味着“查找 ID 以该字符串开头的元素，类似于 id$=（ID 以该字符串结尾）等。

您可以在 此处 的 jQuery 文档页面上可以找到完整的列表。

Answer 6

为什么不直接将 class = "instance" 分配给所有这些并使用 $('.instance') 选择它们呢？

Answer 7

使用胡萝卜。

$("div[id^=instance]").hide();

jsFiddle 示例

Answer 8

这是 id 通配符问题的唯一正确答案。

$('[id*="Wild card in double quotes"]') 

这将得到“双引号中的通配符。还有更多！”，以及“Wild 前面有更多 BS。双引号中的通配符”。

您应该使用与“[]”标签不同的引号。

Answer 9

我们可以这样做：

$(document).ready(function () {
    $('[id*=btnOk]').live("click", function () {

    });
});