JQuery 选择器：如何选择具有特定类 * 和 * id 的项目

Posted 2023-05-09

【中文标题】JQuery 选择器：如何选择具有特定类 * 和 * id 的项目

【英文标题】：JQuery Selectors: How to select item with specific class *and* id

【发布时间】：2011-01-02 13:26:17

【问题描述】：

我正在尝试在我的页面上选择一个具有特定类和 ID 的 html 元素。这是标签：

<div class="statusLight" id="green"></div>

我试过这个没有运气：

$statusLight = $('.statusLight#green');

我知道我可以简单地说

$statusLight = $('#green');

但我也试图找到一种方法来根据它的类来选择它。任何帮助将不胜感激。

【问题讨论】：

知道ID为什么还要按班级选择？按照设计，ID 是唯一的，因此这将是选择元素的最快方式。

我不明白。 id 应该是唯一的并结束所有过滤。应用任何东西 + id 应该与仅通过 ID 选择完全相同。你为什么要这样做？

无论如何，我很确定 jQuery 在找到具有 ID 的选择器的第一个实例时会停止，从而无法区分重复 ID。

这样做的一个原因可能是元素的类发生了变化，他只想在给定类的情况下选择元素。 （好吧，只是猜测，但关键是这可能是有原因的）。

“我很确定 jQuery 在找到具有 ID 的选择器的第一个实例时会停止”——我希望并相信 这不是真的，因为它会破坏 CSS 选择器的点——选择器的所有部分都必须匹配，而不仅仅是 ID。如果您只对具有特定类的给定元素感兴趣怎么办？您的优化会破坏这种行为。

【参考方案1】：

#green.statusLight 和 .statusLight#green 都是有效的选择器，应该选择您要查找的元素。不过第一个会更快。

您是在加载文档后使用$(...)，即来自$(document).ready(function() ... )，还是将脚本放在元素之后？

【讨论】：

感谢彼得的快速回复。它实际上最终成为了“Light”而不是“light”的错字。你放弃的两种方法最终都奏效了。

【参考方案2】：

我不完全确定您为什么要这样做。

ID 应该是唯一的，因此当您选择它时，不需要任何进一步的专业化。如果不是，那么您需要修改您的 HTML 以使其如此。

这种情况只有在将类选择器与元素选择器结合使用时才有意义，例如

$("div.statuslight")

但在你的例子中，没有意义，因为你有一个 ID！

【讨论】：

詹姆斯，我同意你的看法。在我的代码中确实更具可读性，但你是对的.. 无论如何，所有 ID 都是唯一的，那么为什么还要过滤它们呢？顺便说一句，我的问题最终是一个错字..

存在这样的情况，您希望仅在元素具有类的情况下对其进行事件委托。假设您有一个拖放元素，并且您只希望它在被赋予特定类（通过某种交互）时是可点击的。

【参考方案3】：

为什么还要选择班级？ ID 应该是唯一的，因此向其中添加类不会给您带来任何好处。如果您只使用 ID，它会更有效，因为 jQuery 可以只使用本机 getElementByID，它总是最快的。尽可能保持查询简单。

【讨论】：

@Parrots，我同意。这在我的代码中更多的是可读性，而不是功能需求。感谢您的建议。

这样做的一个原因可能是元素的类发生了变化，他只想在给定类的情况下选择元素。 （好吧，只是猜测，但关键是这可能是有原因的）。 [重复与上述相同的评论]

【参考方案4】：

$(".class#id") 或 $("#id.class") 都可以工作。

每个人在这个问题上的观点是没有理由这样做......可能没有“最佳实践”的理由来使用精心设计的程序来做到这一点，但在现实世界中，我们大多数人都在公司工作具有组织得不是很好的代码库，如果您正在处理一个超过 10000 个文件的大型程序，您可能不想替换非描述性 id，并且通过向选择器添加一个类，您可以帮助您的其他编码人员了解在哪里id 来自哪里。

举个例子，我在一个项目中工作，我们有在页面上创建“小部件”的容器 DIV……这些“小部件”从数据库中获得了一个数字 ID，所以我们以<div id="12345" class="widget">结束/p>

在我在这里工作很久之前，其他人对这个模棱两可的 id 进行了编码......但它仍然存在。当我编写 JQuery 时，我不想让代码变得更混乱......所以我可能更喜欢$(".widget#12345") 而不是$("#12345")，这样人们就不必花半个小时来弄清楚出这个场景中的 12345 id 是一个小部件。

所以虽然$("#12345") 和$(".widget#12345") 选择相同的东西...它使代码对我的同事来说更具可读性，这比提高javascript 速度的几分之一秒更重要。

【讨论】：

确实！另一个用例，我在我的 ID 选择器 [id^=lightbox_flex_field_flex_field_] 中使用通配符，并且在某些情况下也需要获取类来区分，因为用户可以自己定义字段类型......

【参考方案5】：

最简单的方法是：

$('.statusLight[id=green]');

由于 id 是一个属性，你可以使用属性选择器

【参考方案6】：

仅供参考：

如果您希望引用 id 和子类（例如绿色 statusLight 但不是蓝色）：

<div id="green">
    <div class="statusLight"></div>
</div>

<div id="blue">
    <div class="statusLight"></div>
</div>

那你需要加个空格$("#green .statusLight")

【参考方案7】：

您可能会这样做的另一个原因是，如果您已缓存通用代码以查找特定 Id，但您只想在分配了特定样式时激活它。尤其是在渲染 ID 可能位于某些视图中的支架 MVC 项目时，但您不想采取行动，例如...“隐藏”ID 字段，但在其他视图中，这些可能是组合中的查找值并具有分配了一个 Select2 插件...