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

Posted

技术标签:

【中文标题】如何在 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'?在一个页面中应该永远使用给定的ididmust 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

【讨论】:

以上是关于如何在 DIV 中选择具有类的项目?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 jQuery 在 div 中定位选择列表?

jQuery选择一个具有某个类的div,它没有另一个类

如何计算具有特定类的 DIV

jQuery 需要帮助在具有特定类的 div 元素中选择 tr 元素

如何选择具有类的所有元素,除了具有与模式匹配的id的祖先的元素?

如何使用jQuery在某些特定div中选择具有相同名称的所有元素[重复]