jQuery Traversal - 공통 조상과 관련된 요소 찾기

Question

일반적으로 공통 컨테이너 내에 있지만 형제가 아니거나 동일한 "트리 라인"내에있는 요소를 선택해야 할 때가 있습니다.

<div id="container-left" class="container"> 
    <div class="sidebar"> 
     <button class="more-link">Show Extras</button> 
    </div> 
    <div class="content"> 
     <div class="tidbits"> 
      <p>Lorem ipsum beep bop boop</p> 
      <p class="extra hidden">Exxtra info about lorem ipsum!</p> 
     </div> 
    </div> 
</div> 
<div id="container-right" class="container"> 
    <div class="sidebar"> 
     <button class="more-link">Show Extras</button> 
    </div> 
    <div class="content"> 
     <div class="tidbits"> 
      <p>Lorem ipsum beep bop boop</p> 
      <p class="extra hidden">Exxtra info about lorem ipsum!</p> 
     </div> 
    </div> 
</div> 

내가 할거야 것은 extra의 클래스로 p 태그를 대상으로 "연락처보기 엑스트라"button의,에 이벤트 리스너를 부착하고, 클릭에서 hidden를 전환 : 예를 들어, HTML을 부여 수업. 그래서 (jQuery를 사용하여) 나는 일반적으로 다음과 같이 선택

$(".more-link").on("click",function(){ 
    var $this = $(this); 
    var $extraElement = $this.closest(".container").find(".extra"); 
    $extraElement.toggleClass("hidden"); 
}); 

내 질문을 다음 .closest().find() 콤보보다 extra 요소를 선택할 수있는 더 나은 방법이 있나요? 그것에 관하여 무언가는 다만 조금 clunky 느낀다.

Answer 1

아니라 .. ... 그것은 HTML5 데이터가 버튼에 속성을 생성하는 것입니다 할

다른 방법으로 당신은 형제 사이드 바 및 추가를 찾기 위해 탐색 할 수 있습니다 ...하지만 엉망이 유사하다 :

을

<button class="more-link" data-extra='#some-generated-extra-id'>Show Extras</button> 
... 
<p id='some-generated-extra-id' class="extra hidden">Exxtra info about lorem ipsum!</p> 

코드 :

$(".more-link").on("click",function() { 
    var $extraElement = $($(this).data('extra')); 
    $extraElement.toggleClass("hidden"); 
});