Question

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

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

我试了这个没有运气：

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

我知道我可以简单地说

$statusLight = $('#green');

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

Answer 1

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

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

Answer 2

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

ID应该是唯一的，因此当您选择它时，不需要任何进一步的专业化。如果没有，那么你需要修改你的HTML来实现它。

只有将类选择器与元素选择器组合在一起时，这种情况才有意义，例如

$("div.statuslight")

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

Answer 3

为什么你还需要在课堂上选择？ ID应该是唯一的，因此将类添加到不会给你带来任何东西。如果你只是使用ID它更有效，因为jQuery只能使用本机getElementByID，它始终是最快的。尽可能简化您的查询。

Answer 4

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

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

例如，我在一个项目中工作，我们在页面上创建了“窗口小部件”的容器DIV ......这些“窗口小部件”从数据库中获得了一个数字ID，因此我们以{{1}结尾}

在我在这里工作很长一段时间之前，其他人编码了模棱两可的内容...但它仍然存在。当我编写JQuery时，我宁愿不要更多地混淆代码混乱......所以我可能更喜欢<div id="12345" class="widget">而不是$("#12345")，以便有人不必花费一半时间 - 小时试图弄清楚这个场景中的12345 id是否为小部件。

因此，虽然$(".widget#12345")和$("#12345")选择相同的东西......但它使代码对我的同事更具可读性，这比速度改进中的一小部分更重要javascript。

Answer 5

只是后续的FYI：

如果您要引用ID和子类（例如绿色statusLight而不是蓝色）：

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

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

然后您需要添加空格$("#green .statusLight")

Answer 6

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

Answer 7

最简单的方法是：

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

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

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

7 个答案:

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

7 个答案:

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