检查是否有任何祖先使用jQuery的类

crm*_*cco 140 html javascript jquery jquery-selectors jquery-1.7

有没有办法在jQuery中检查是否父,祖父,曾祖父有一个类.

我有一个标记结构让我在代码中做了这样的事情:

$(elem).parent().parent().parent().parent().hasClass('left')
Run Code Online (Sandbox Code Playgroud)

但是,为了代码可读性,我想避免这种事情.有没有办法说"任何父母/祖父母/曾祖父母都有这门课程"?

我正在使用jQuery 1.7.2.

Ale*_*lex 279

if ($elem.parents('.left').length) {

}
Run Code Online (Sandbox Code Playgroud)

  • 谢谢,正是我需要的!为了记录,虽然在JS中将`.length`视为truthy值的做法非常多,但是更清楚也更容易理解`.length> 0 (18认同)
  • 这是jQuery [.parents()](https://api.jquery.com/parents/)文档的链接 (2认同)

A. *_*lff 73

有许多方法可以过滤元素祖先.

if ($elem.closest('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents('.parentClass').length /* > 0*/) {/*...*/}
if ($elem.parents().hasClass('parentClass')) {/*...*/}
if ($('.parentClass').has($elem).length /* > 0*/) {/*...*/}
if ($elem.is('.parentClass *')) {/*...*/} 
Run Code Online (Sandbox Code Playgroud)

注意,closest() 方法在检查选择器时包含元素本身.

或者,如果您有一个与之匹配的唯一选择器$elem,例如#myElem,您可以使用:

if ($('.parentClass:has(#myElem)').length /* > 0*/) {/*...*/}
if(document.querySelector('.parentClass #myElem')) {/*...*/}
Run Code Online (Sandbox Code Playgroud)

如果您想根据其任何祖先类匹配元素仅用于样式目的,只需使用CSS规则:

.parentClass #myElem { /* CSS property set */ }
Run Code Online (Sandbox Code Playgroud)

  • @Alex确实很有趣,thx为输入!顺便说一句,重新阅读这个问题,"在jQuery中是否有任何方法可以检查是否有任何父,...`,`nearest()`检查元素本身所以这不是真正回答的问题,OP可能希望明确地排除元素本身,所以,回答是使用`.parents()` (3认同)
  • 我可能冒昧地说(没有测试这个)这种方法更好.Elem.parents将遍历整个父dom结构,其中nearest()应该(可能)一旦找到与该元素最近的父节点就停止,因此效率更高.这是一个没有受过教育的猜测.我通常使用nearest().听起来我找到了一个研究我博客的新主题!:P (2认同)
  • 当没有父母被找到时,父母()比最近的()快得多()http://jsperf.com/closest-vs-parents-foobar (2认同)

Igo*_*mov 7

您可以使用parents带有指定.class选择器的方法并检查它们是否与它匹配:

if ($elem.parents('.left').length != 0) {
    //someone has this class
}
Run Code Online (Sandbox Code Playgroud)