JQuery 选择器：如何选择具有特定类 * 和 * id 的项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2021641/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Selectors: How to select item with specific class *and* id
提问by BAHDev
I'm trying to select an HTML element on my page that has a specific class and ID. Here's the tag:
我正在尝试在我的页面上选择一个具有特定类和 ID 的 HTML 元素。这是标签：
<div class="statusLight" id="green"></div>
I tried this with no luck:
我没有运气就试过这个：
$statusLight = $('.statusLight#green');
I know that I could simply say
我知道我可以简单地说
$statusLight = $('#green');
But I was trying to find a way to select it based on its class as well. Any help would be appreciated.
但是我也试图找到一种方法来根据它的类来选择它。任何帮助，将不胜感激。
回答by Peter ?tibrany
Both #green.statusLightand .statusLight#greenare valid selectors and should select element you're looking for. First one will be faster though.
这两个#green.statusLight和.statusLight#green是有效的选择，应选择你要找的元素。不过第一个会更快。
Are you using $(...)after your document is loaded, i.e. from $(document).ready(function() { ... })or by placing your script after your element?
您是否$(...)在加载文档后使用，即从$(document).ready(function() { ... })或通过将脚本放置在您的元素之后？
回答by James Wiseman
I'm not entirely sure why you would want to do this.
我不完全确定你为什么要这样做。
An ID should be unique, and therefore when you select it, there is no need for any further specialisation. If not then you need to modify your HTML to make it so.
ID 应该是唯一的，因此当您选择它时，不需要任何进一步的专业化。如果没有，那么您需要修改您的 HTML 以使其如此。
This scenario would only make sense if you were combining a class selector with an element selector, e.g.
这种情况只有在您将类选择器与元素选择器结合使用时才有意义，例如
$("div.statuslight")
But in your example, there's just no point, as you have an ID anyway!
但是在您的示例中，这毫无意义，因为无论如何您都有 ID！
回答by Parrots
Why would you need to select on the class as well? IDs should be unique so adding the class to that wouldn't buy you anything. If you just use ID it's more efficient because then jQuery can just use the native getElementByID which is always the fastest. Keep your queries simple when you can.
为什么你还需要在课堂上选择？ID 应该是唯一的，因此将类添加到该类不会给您带来任何好处。如果你只使用 ID，它会更有效率，因为 jQuery 可以只使用本地 getElementByID，它总是最快的。尽可能保持您的查询简单。
回答by user1610157
$(".class#id")or $("#id.class")will both work.
$(".class#id")或者$("#id.class")两者都有效。
Everyone's comments in this question is that there is no reason to do this... there may not be a "best practices" reason to do this with a well designed program, but in the real world most of us work at companies that have code bases that are not very well organized and if you are working on a large 10000+ file program, you might not want to replace a non-descriptive id and by adding a class to the selector you can help your fellow coders understand where the id came from.
在这个问题中每个人的评论是没有理由这样做......可能没有一个“最佳实践”的理由用一个设计良好的程序来做到这一点，但在现实世界中，我们大多数人都在拥有代码的公司工作组织不是很好的基础，如果你正在处理一个 10000+ 文件的大型程序，你可能不想替换一个非描述性的 id，并且通过向选择器添加一个类，你可以帮助你的同事编码人员了解 id 的来源从。
Case in point, I work on a project where we have container DIVs that create "widgets" on the page... these "widgets" are given a numeric id from the database, so we end of with <div id="12345" class="widget">
举个例子，我在一个项目中工作，我们有容器 DIV 在页面上创建“小部件”……这些“小部件”从数据库中获得了一个数字 ID，所以我们以 <div id="12345" class="widget">
Someone else coded the ambiguous id a long time before I worked here... but it remains. When I write JQuery, I would prefer not to make more of a confusing mess of the code... so instead of $("#12345")I might prefer $(".widget#12345")so that someone doesn't have to spend a half-hour trying to figure out that the 12345 id in this scenario is for a widget.
在我在这里工作之前很长时间，其他人编码了这个模棱两可的 ID……但它仍然存在。当我写了jQuery，我宁愿不赚更多的代码的混乱乱七八糟的......所以不是$("#12345")我可能更喜欢$(".widget#12345")让别人不必花一个半小时试图弄清楚的是，12345号中此方案适用于小部件。
So while $("#12345")and $(".widget#12345")select the same thing... it makes the code much more readable for my co-workers and that is more important than a fraction of a second in speed improvement for the javascript.
因此，尽管$("#12345")与$(".widget#12345")选择同样的事情...它使代码更可读了我的同事，这是不是在为JavaScript速度提升第二的分数更重要。
回答by Angus Walker
Just a follow-up FYI:
只是一个后续仅供参考：
If you are looking to reference an id and sub-class (e.g. the green statusLight but not the blue):
如果您希望引用 id 和子类（例如绿色 statusLight 但不是蓝色）：
<div id="green">
<div class="statusLight"></div>
</div>
<div id="blue">
<div class="statusLight"></div>
</div>
Then you need to add a space $("#green .statusLight")
然后你需要添加一个空格 $("#green .statusLight")
回答by Brian Kirkpatrick
Another reason that you would probably do this is if you have cached generic code looking for a specific Id, but you only want to activate it when you have a specific style assigned. Especially when rendering scafolded MVC items where IDs may be in certain views, but you don't want to have action taken on, say... "hidden" id fields, but in other views these may be lookup values in a combo and have a Select2 addin assigned...
您可能会这样做的另一个原因是，如果您已缓存通用代码以查找特定 Id，但您只想在分配了特定样式时激活它。特别是在渲染基架 MVC 项目时，其中 ID 可能在某些视图中，但您不想采取行动，例如……“隐藏”ID 字段，但在其他视图中，这些可能是组合中的查找值，并且具有分配了 Select2 插件...
回答by Thermech
The easiest way is:
最简单的方法是：
$('.statusLight[id=green]');
$('.statusLight[id=green]');
As the id is a attribute you can use the attribute selector
由于 id 是一个属性，您可以使用属性选择器
