JQuery는 특정 클래스 접두사가있는 첫 번째 부모 요소를 찾습니다.

124

특정 클래스 접두사를 가진 첫 번째 부모를 얻고 싶습니다.

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

예를 들어, 현재 요소는 #divid이고 클래스 접두사 div-a가있는 첫 번째 요소를 찾고 싶습니다. 따라서 기본적으로 다음을 선택합니다.

<div class="div-a89892">

jquery jquery-selectors

— 시간 여행
소스

중지. 정보를 한 클래스로 결합하는 대신 여러 클래스를 사용하십시오. '일치'선택기는 느리고이 디자인은 수정을 위해 확장되지 않습니다. <div class='a'>에 대한 규칙을 제공하십시오 div.a. div실제로 클래스 이름을 입력하는 이유를 전혀 모르겠습니다 .

— Stefan Kendall

그래도 데이터를 클래스 접두사로 병합하지 마십시오. 이것은 끔찍한 패턴이며 여러 클래스로 쉽게 해결할 수 있습니다.

— Stefan Kendall

@StefanKendall : 때로는 다른 사람의 타사 쓰레기를 다루고 있으며 때로는 신속하게 수정할 수없는 레거시 앱을 지원합니다. 나쁜 디자인은 삶의 사실이며 이것은 완벽하게 합법적 인 질문입니다.

— Nerdmaster

답변:

222

.closest()선택기와 함께 사용 :

var $div = $('#divid').closest('div[class^="div-a"]');

— 매트 볼
소스

BTW, 이것이 왜 반대표를 받았는지 모르겠습니다. 클래스 접두어 선택은 취성이지만, 그것은 것입니다 작동합니다.

— Matt Ball

OP하려면 : 찾고있는 요소가 DOM 트리 어딘가에있는 부모인지, 찾고있는 객체와 유사한 것이 아닌지 확인하십시오 (문서에 따라). "문서의 어느 곳에서나 가장 가깝다"가 아니라 "DOM 트리를 작업하여 가장 가깝습니다".

— Christian P.

나를 위해 작동하지 않습니다. 또한 div 요소가 아니어도되는 특정 접두사가있는 첫 번째 요소를 찾고 싶습니다.

— Time Travel

@Time 그런 다음 div요소 선택기 를 제거하십시오 $('#divid').closest('[class^="div-a"]').. @Stefan이 언급했듯이 실제로 여러 클래스를 사용해야합니다.

— Matt Ball

이 선택기는 터무니없는 양의 사이클을 사용하지만 여전히 빠를 수 있습니다. IE6, IE7 또는 IE8을 지원해야하는 경우 DOM이 너무 커지면 정말 망할 수 있습니다. IE는 특정 수의 JS VM 명령이 실행될 때 "스크립트가 응답하지 않음"대화 상자를 표시하고 특정 시간이 지나지 않습니다. 나는 바로 이런 이유로 인터넷 익스플로러가 0.1ms에서 종료되는 스크립트를 보았다.

— Stefan Kendall

나중에 Jquery를 사용하면 .parents()메서드로 부모를 찾을 수 있습니다 .

따라서 다음을 사용하는 것이 좋습니다.

var $div = $('#divid').parents('div[class^="div-a"]');

이것은 선택자와 일치하는 모든 부모 노드를 제공합니다. 선택기와 일치하는 첫 번째 부모를 얻으려면 다음을 사용하십시오.

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

등의 DOM 통과 쿼리의 경우에 문서를 체크 아웃 DOM을 통과 .

— 써니 R 굽타
소스

대답은 오해의 소지가 없으며 .closest ()에 대한 또 다른 대안을 보여주는 것뿐입니다. .parents ()는 더 읽기 쉽고 문제에 대한 또 다른 해결책입니다.

— Sunny R Gupta 2013

Closest는 이보다 더 나은 솔루션입니다. 분명히 가장 가까운 것을 사용하는 것이 더 효율적이지만 동의하지만 가장 잘 명명 된 함수는 아닙니다.

— Mog0 2014

재미있게도 .parentsUtil ()이 예상대로 작동하지 않았기 때문에이 솔루션을 사용하게되었습니다.

— Mark Handy