DOMのトラバース用の短いバージョン

Question

私は.childクラスでクリックイベントを持っています。このクラスから.productHolder divに到達したいと思います。今私は本当に長いセレクターを持っています。私はこれを行うためのより短いバージョンがあるのだろうかと思っていた。

HTML：

<ul class="sm sm-simple"> 
    <li> 
     <a href="#">INTERNET</a> 
     <ul> 
      <li> 
       <a href="#">Prod 1</a> 
       <ul> 
        <li><a href="#" class="child">Var M</a></li> 
        <li><a href="#" class="child">Var L</a></li> 
        <li><a href="#" class="child">Var XL</a></li> 
       </ul> 
      </li> 
      <li> 
       <a href="#">Prod 2</a> 
       <ul> 
        <li><a href="#">Var 1</a></li> 
       </ul> 
      </li> 
     </ul> 
     <div class="productHolder"></div> 
    </li> 
</ul> 

JS：既存のHTML構造で

$('.child').on('click', function (event) { 
    productHolder = $(event.target).parent().parent().parent().parent().siblings('.productHolder'); 
}); 

Answer 1

は、あなたが使用することができsm-simpleその後、find()までトラバースする.closest()を使用することができます。

productHolder = $(this).closest('.sm-simple').find('.productHolder');