选择所有以某个字符串开头的ID的jQuery或CSS选择器

Question

如何选择所有 id 以 "player_" 开头的元素？

我有多个此类元素：

<div id="player_290x3dfda">text</div>

每个id都有一个唯一的标识符。我该如何使用jQuery或者纯CSS选择所有这些元素？

- matt

---

使用此链接http://api.jquery.com/attribute-starts-with-selector/。 - Mahima

Answer 1

通常你会使用ID选择器#来选择ID，但是对于更复杂的匹配，您可以使用属性开始匹配选择器（作为jQuery选择器或CSS3选择器）：

div[id^="player_"]

如果您能够修改HTML，您应该向播放器div添加一个类，然后针对该类进行目标定位。无论如何，您都会失去ID选择器提供的额外特殊性，因为属性选择器与类选择器具有相同的特殊性。而且，只使用类会使事情变得更简单。

- BoltClock

---

这个 CSS 选择器是否适用于旧版浏览器如 IE8 和 IE9？如果不可用，有什么替代方法？ - Jim

非常兼容 - 请查看quirksmode：http://www.quirksmode.org/css/selectors/#link3 - doub1ejack

如果您不知道HTML元素的类型怎么办？例如它可能是一个输入框，或者下拉菜单等等。 - And Wan

@And Wan：那就不要加类型选择器了，它并不是必需的。 - BoltClock

使用类来实现功能是不好的做法！CSS 用于样式！如果类名称因为新的样式而改变怎么办？那么所有的函数都会出问题！ - Raqem

@Raqem：https://blog.novalistic.com/archives/2018/01/using-css-selectors-for-non-css/#attributes https://dev59.com/W2Ml5IYBdhLWcg3wFjkC#18701712 - BoltClock

Answer 2

试试这个：

$('div[id^="player_"]')

- Prakash

---

这应该是答案。它展示了如何在代码中实际实现解决方案。谢谢，Prakash！ - KWallace

Answer 3

您可以使用元字符，例如*（http://api.jquery.com/category/selectors/）。因此，我认为您只需使用$('#player_*')。

在您的情况下，您还可以尝试“属性开始于”选择器：http://api.jquery.com/attribute-starts-with-selector/：$('div[id^="player_"]')。

- Timon

---

实际上，我认为你不能使用 *$('#prefix*')*。至少我无法让它工作... - Konrad Viltersten

这在我的Chrome浏览器上不起作用。 - rept

我认为你没有理解文档的意思： 要将任何元字符（例如 !"#$%&'()*+,./:;<=>?@[\]^\{|}~`）**作为名称的文字部分**使用，必须用两个反斜杠进行转义：\。例如，具有id =“foo.bar”的元素可以使用选择器 $（“＃foo \\. bar”）。 - Vinicius Monteiro

Answer 4

$('div[id ^= "player_"]');

这对我有用...选择所有以“players_”关键字开头的Div，并将其显示出来。

- Riddhi