如何在 DIV 中选择具有类的项目？

Posted 2023-03-05

【中文标题】如何在 DIV 中选择具有类的项目？

【英文标题】：How can I select item with class within a DIV?

【发布时间】：2011-10-19 12:16:39

【问题描述】：

我有以下 html：

<div id="mydiv">
  <div class="myclass"></div>
</div>

我希望能够使用选择内部 div 的选择器，但特定于 mydiv 容器。如何使用 jQuery 实现这一点？

【参考方案1】：

试试：

$('#mydiv').find('.myclass');

JS Fiddle demo.

或者：

$('.myclass','#mydiv');

JS Fiddle demo.

或者：

$('#mydiv .myclass');

JS Fiddle demo.

参考资料：

find()。 Selector context。

---

很高兴从find() 文档中学习：

.find() 和 .children() 方法是相似的，除了 后者仅沿 DOM 树向下移动一层。

【讨论】：

后两个不行，但是find就可以了。第二个将选择每个 class=myclass 并选择每个 id=mydiv) 我认为。

@czupe：不，虽然上下文选择器方法的编写方式不同，但 jQuery 在内部实现了与第一个代码 sn-p 中使用的相同的 $('#mydiv').find('.myclass'); 方法。顺便说一句：'...选择每个id=mydiv'？在一个页面中应该永远使用给定的id（idmust be unique within the document）。

@DavidThomas 我刚试过 $('#mydiv .myclass');最终选择了所有具有 myclass 类的 div，而不仅仅是 mydiv 中的 div。

@user3281466：真的吗？这似乎不太可能，你能reproduce your problem吗？

如何检查 div 中的任何内容，然后将其放入 :not()

【参考方案2】：

试试这个

$("#mydiv div.myclass")

【讨论】：

或者如果你不关心它是否是div（或者它永远是div），你可以简化为$("#mydiv .myclass")。

@Michael - 是的，我们可以说 .mycalss 但如果我们知道它是一个 div，div.myclass 将使搜索更快。

@Shankar，它很可能不会让它更快，而是更慢。假设 jquery 使用 sizzle 而不是本机 document.queryselectorall 它可能会以相同的方式搜索并在您的情况下执行 extra 检查。可能本机实现也会这样做。

我运行的一些快速测试表明这取决于浏览器。它在 Chrome 中显得稍快，在 FF 中显得稍慢。无论哪种方式，除非您多次运行此选择器或运行大量元素，否则差异可能可以忽略不计。请参阅here 了解我的粗略（可能有缺陷）测试。

@Michael - 如果我们指定标记名和类名，它将首先使用 getElementsByTagName 然后查找肯定更快的类名，并且仍然使用本机方法进行第一级排序。无论如何，如果要选择的元素不多，则可以忽略不计。

【参考方案3】：

您将采用与应用 css 选择器相同的方式进行操作。 例如，您可以这样做

$("#mydiv > .myclass")

或

$("#mydiv .myclass")

最后一个将匹配 myDiv 中的每个 myclass，包括 myclass 中的 myclass。

【参考方案4】：

试试这个$(".video-divs.focused")。如果您正在寻找有焦点的视频 div，这很有效。

【参考方案5】：

如果要选择具有类属性“myclass”的每个元素，请使用

$('#mydiv .myclass');

如果您只想选择具有类属性“myclass”的 div 元素，请使用

$("div#mydiv div.myclass");

更多关于 jquery 选择器的信息请参考这些articles