jQuery选择器中的通配符

668

我正在尝试使用通配符获取ID以“ jander”开头的所有元素的ID。我试过了$('#jander*')，$('#jander%')但是没有用。

我知道我可以使用元素的类来解决它，但是也可以使用通配符？

<script type="text/javascript">

  var prueba = [];

  $('#jander').each(function () {
    prueba.push($(this).attr('id'));
  });

  alert(prueba);


});

</script>

<div id="jander1"></div>
<div id="jander2"></div>

jquery jquery-selectors sizzle

— ziiweb
source

2

这是关于jQuery（或更确切地说是Sizzle引擎）的问题。

— PeterÖrneholm2011年

1

只需注意：使用jQuery或Sizzle可以利用浏览器功能的类，这样做会更快（不过，对于现代浏览器来说，应该没有太大的区别）。

— 菲利克斯·克林

4

JQuery选择器正则表达式的

— Robert MacLean

7

另外，需要注意的重要一点是，$("[id*=jander]")将选择ID包含字符串jander的所有元素。

— 加布里埃尔·瑞安·纳米亚斯

1279

要获取所有以“ jander”开头的元素，您应该使用：

$("[id^=jander]")

为了得到那些以“詹德”结尾的人

$("[id$=jander]")

另请参见JQuery文档

— 尼科
source

22

该文档给出了以下示例：$('input[name^="news"]').val('news here!')

— 布伦登

5

该代码按预期工作。无需使用双引号，它只会增加错过右引号的机会，并使可读性降低。

— nico 2012年

4

@nico有趣的是，文档说它可以与属性一起使用，id并且在技术上是属性，但是我猜想随着jquery的最新发行版（即1.9）以及如何处理属性和属性的最新更改，这条线稍微模糊了关于这两个，因此您可以将属性选择器用于（至少某些）属性。

— johntrepreneur

如果我要选择所选的偶数，该怎么办。例如：.col-lg-4:even div:nth-child(1)如果我想做同样的事情，我现在有...。我会写什么？"[class^=.col-lg-]:even"？（我似乎没有让它起作用）

— Luis Robles

某些行为使我感到惊讶-如果我将其与“ class $ = ...”一起使用，它将搜索项目的类别列表，而不是单个类别名称。因此，只有在搜索的类别是该项目的最后一个类别时，它才会命中。除了Chrome以外，没有测试过。并且不确定缺陷是在jQuery中还是在我对jQuery的期望中。

— 罗杰·克鲁格

115

由于标题建议使用通配符，因此您也可以使用以下命令：

$(document).ready(function(){
  console.log($('[id*=ander]'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="jander1"></div>
<div id="jander2"></div>

展开摘要

这将在中的任何位置选择给定的字符串id。

— 马丁·史密特（Martijn Smidt）
source

39

尝试jQuery starts-with

选择器'^ ='，例如

[id^="jander"]

我不得不问，为什么不使用类呢？

— 机器山羊
source

2

要添加上下文，我正在寻找相同的解决方案，因为我使用的是Django，其Django的ModelForm类基于模型指示ID，并且似乎不允许进行此类分组。即HTML是我无法控制的。

— Christian Mann

当使用ASP.Net WebForms，尤其是单选和复选框列表时，这很有用。

— DavidScherer

35

对于您可以使用的类：

div[class^="jander"]

— l3thal
source

我无法使它工作，收到有关无效语法的消息。

— stian

14

要从通配符匹配中获取ID：

$('[id^=pick_]').click(
  function(event) {

    // Do something with the id # here: 
    alert('Picked: '+ event.target.id.slice(5));

  }
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="pick_1">moo1</div>
<div id="pick_2">moo2</div>
<div id="pick_3">moo3</div>

展开摘要

— PJ布鲁内特
source

2

代替“ event.target.id”，它也可能起作用：$（this）.attr（“ id”）

— PJ Brunet 2014年

10

如果您使用更复杂的ID字符串，则必须使用双引号。

例如，如果您具有这样的ID： id="2.2"，则访问它的正确方法是：$('input[id="2.2"]')

出于安全原因，请尽可能使用双引号。

— 爱德华
source