是否存在用于标识符（id）的通配符选择器？

70

如果我有数量未知的标识符共享一个特定的命名方案，是否可以使用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(){}

jquery jquery-selectors wildcard

— 马特·埃尔霍蒂比
source

8

您所有的示例都是标识符，而不是类。

— 柯克·沃尔

181

该属性开始，与选择（'^=）会为你的ID的工作，就像这样：

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

但是，请考虑为您的元素提供一个通用类，例如（我自己做了个例子）.instance，然后使用该选择器：

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

— 尼克Craver
source

2

@JonCram我将自己限制在笑声中，但仍然为该名称+1。:)

— Konrad Viltersten 2013年

6

有趣但不回答问题（Eric确实如此）

— Rune Jeppesen 2014年

2

@RuneJeppesen如果您查看问题中的实际代码，它会执行操作，OP与类vs ID术语混淆了，这是我同意的问题。

— 尼克·克雷弗

2

@NickCraver我不想成为那个家伙，但事实并非如此。但是，您确实可以解决他的问题。我有相同的问题，您的答案不能解决我的问题（有问题的元素来自第三方插件）

— Rune Jeppesen 2014年

1

@RuneJeppesen确实如此，看看这个问题，这是他想要匹配的ID列表。我将展示如何执行此操作，以及如何执行此操作的更好建议-如果您可以控制的话。

— 尼克·克拉弗

90

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

// 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
});

— 埃里克
source

12

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

码：

$.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');

请享用！

— 蒂莫西·佩雷斯（Timothy Perez）
source

+1，太好了！我对两个UL元素（嵌套菜单）进行了尝试，使用$('ul:likeClass(menu_)').addClass('found_menu');它们可以很好地进行测试。你有一个主意，如果类名是“ menu_left”和“ menu_right”，如何提取类名的“通配符”部分，例如“ left”或“ right”？

— ddlab

11

如果您有jQuery，则无需额外的expr或任何其他工具

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

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

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

— 新井
source

3

您为什么不只分配class = "instance"给所有人，然后使用选择它们$('.instance')？

— 卡萨布兰卡
source

3

这些是ID，但是您可以执行以下操作：

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

不过，这有点贵-如果您可以指定a）元素的类型或b）DOM中的一般位置，则将有所帮助，例如：

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

所述[id^='...']选择器基本上意味着“找到一个元素的ID开始以该字符串，类似于id$=（以该字符串ID端）等。

你可以找到jQuery的文档页面的完整列表在这里。

— 移动
source

2

用胡萝卜。

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

jsFiddle示例

— 哈尼芬
source

-2

我们可以这样：

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

    });
});

— 汤玛士
source

1

live不推荐使用。使用on。

— nhahtdh

-2

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

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

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

您应使用与'[]'标签不同的引号。

— 库尔特
source