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

Posted 2023-03-05

【中文标题】jQuery或CSS选择器选择以某个字符串开头的所有ID [重复]

【英文标题】：jQuery or CSS selector to select all IDs that start with some string [duplicate]

【发布时间】：2011-06-27 12:58:54

【问题描述】：

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

我有多个这样的元素：

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

每个id 上都有一个独特的印记。如何使用 jQuery 或纯 CSS 选择所有这些元素？

【问题讨论】：

使用这个api.jquery.com/attribute-starts-with-selector

【参考方案1】：

通常您会使用 ID 选择器 # 选择 ID，但对于更复杂的匹配，您可以使用 attribute-starts-with 选择器（作为 jQuery selector 或 CSS3 选择器）：

div[id^="player_"]

但是，如果您能够修改该 html，则应向播放器添加一个类divs，然后定位该类。无论如何，您将失去 ID 选择器提供的额外特异性，因为属性选择器与类选择器具有相同的特异性。另外，只使用一个类就可以让事情变得更简单。

【讨论】：

CSS 中的这个选择器是否适用于 ie8 和 ie9 等旧版浏览器，如果不适用，还有什么替代方案？

它非常兼容 - 查看 quirksmode：quirksmode.org/css/selectors/#link3

如果不知道html元素的类型怎么办？就像它可以是输入或选择等。

@And Wan：然后省略类型选择器。这不是必需的。

将类用于功能是一种不好的做法！ CSS是用于样式的！如果由于实现了新样式而更改了类名怎么办？那么你所有的功能都会崩溃！

【参考方案2】：

试试这个：

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

【讨论】：

这应该是答案。它展示了如何在代码中实际实现解决方案。谢谢，普拉卡什！

【参考方案3】：

您可以使用元字符，例如* (http://api.jquery.com/category/selectors/)。 所以我认为你可以使用$('#player_*')。

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

【讨论】：

其实我相信你不能用$('#prefix*')。至少我没有让它工作......

这对我不起作用（在 Chrome 中）。

嗯，我想你不明白文档说什么：使用任何元字符（例如!"#$%&'()*+,./:;<=>?@[\]^`|~）作为名称的文字部分，它必须用两个反斜杠转义：\\.例如，一个 id="foo.bar" 的元素，可以使用选择器$("#foo\\.bar")

【参考方案4】：

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

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