jQuery 选择器中的通配符答案

【问题标题】：Wildcards in jQuery selectorsjQuery 选择器中的通配符
【发布时间】：2011-07-19 14:03:26
【问题描述】：

我正在尝试使用通配符来获取 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（或者更确切地说是 Sizzle 引擎）的问题。
请注意：使用类会快得多，因为 jQuery 或 Sizzle 可以使用浏览器功能（不过对于现代浏览器应该不会有太大区别）。
JQuery selector regular expressions的可能重复
另外，需要注意的重要一点是$("[id*=jander]") 将选择 ID 包含字符串 jander 的所有元素。

标签： jquery jquery-selectors sizzle

【解决方案1】：

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

$("[id^=jander]")

获取以“jander”结尾的那些

$("[id$=jander]")

另见JQuery documentation

【讨论】：

文档给出了这个例子：$('input[name^="news"]').val('news here!')

【解决方案2】：

试试 jQuery 的开头 -

选择器，'^='，例如

[id^="jander"]

我不得不问，你为什么不想使用类来做到这一点？

【讨论】：

【解决方案3】：

你可以使用的类：

div[class^="jander"]

【讨论】：

【解决方案4】：

由于标题建议使用通配符，您也可以使用：

$(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 中任意位置的给定字符串。

【讨论】：

【解决方案5】：

要从通配符匹配中获取 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>

【讨论】：

【解决方案6】：

当你有一个更复杂的 id 字符串时，双引号是强制性的。

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

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

【讨论】：