조상이 jQuery를 사용하여 클래스를 가지고 있는지 확인하십시오.


156

여부를 확인하기 위해 jQuery를 어떤 방법이 어떤 부모, 그랜드 부모, 훌륭한 그랜드 부모 클래스를 가지고는.

코드에서 이런 종류의 작업을 수행하도록하는 마크 업 구조가 있습니다.

$(elem).parent().parent().parent().parent().hasClass('left')

그러나 코드 가독성을 위해 이런 종류의 것을 피하고 싶습니다. "부모 / 조부모 / 조부모님은이 수업을 듣습니다"라고 말할 방법이 있습니까?

jQuery 1.7.2를 사용하고 있습니다.


stackoverflow.com/questions/16863917/…- 누군가가 jQuery없이 수행하려는 경우
Robert Niestroj

답변:


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

}

19
고마워, 내가 필요한 것! 기록적으로, .lengthJS에서 진실 된 가치로 취급하는 관행 은 상당히 .length > 0
많지만

2
다음은 jQuery .parents () 문서에 대한 링크입니다.
H Dog

75

요소 조상을 필터링하는 방법에는 여러 가지가 있습니다.

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 *')) {/*...*/} 

주의 , closest() 선택기를 확인하는 동안 방법 요소 자체를 포함한다.

당신이있는 경우 또는 고유 한 선택 일치하는 $elem예를 #myElem, 당신은 사용할 수 있습니다 :

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

스타일링 목적으로 만 조상 클래스에 따라 요소를 일치 시키려면 CSS 규칙을 사용하십시오 .

.parentClass #myElem { /* CSS property set */ }

2
이 방법이 더 좋다고 (테스트하지 않고) 말을 할 수도 있습니다. Elem.parents는 전체 부모 dom strucutre를 가로 지르며, closest ()는 해당 요소가있는 가장 가까운 부모를 찾으면 더 효율적으로 중지해야합니다. 이것은 교육받지 않은 추측입니다. 나는 보통 closest ()를 사용합니다. 블로그에서 조사 할 새로운 주제를 찾은 것 같습니다. : P
dudewad

@dudewad 네, 그렇습니다.하지만 최근입니다. 구형 jq 버전 인 AFAIK에서는 그렇지 않았습니다. closest ()를 사용하여 처음 일치하는 부모에서 부모 루프가 중단되지 않았지만 이제는 루프입니다. (어떤 jq 버전부터 모르지만이 진술에 대해서는 확실히 확신합니다)
A. Wolff

정보를 주셔서 감사합니다. 그들이 첫 번째 버전에서 침입을 구축하지 않았을 것입니다.
dudewad

2
부모를 찾을 수 없을 때, 부모 ()가 closest ()보다 빠릅니다 jsperf.com/closest-vs-parents-foobar
Alex

3
@Alex 입력을 위해 정말 interxing, thx! BTW, 다시 읽기 문제를 Is there any way in jQuery to check if any parent,..., closest()요소 자체에 대한 확인이 정말 질문에 대답되지 않도록은, 영업 이익은 explecitely 나중에, 그래서 대답은 사용하는 것이었다, 요소 자체를 배제 할 수.parents()
A. 울프

7

parents지정된 .class선택자와 함께 메소드를 사용 하고 일치 하는 메소드가 있는지 확인할 수 있습니다 .

if ($elem.parents('.left').length != 0) {
    //someone has this class
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.