如何在 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
'?在一个页面中应该永远使用给定的id
(id
must 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 元素中选择 tr 元素