Kürzere Version für DOM traversing

Question

Ich habe ein Klickereignis auf eine .child Klasse. Ich möchte das .productHolder div von dieser Klasse erreichen. Jetzt habe ich einen wirklich langen Selektor. Ich habe mich gefragt, ob es dafür eine kürzere Version gibt.

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:

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

Answer 1

Mit Ihrer bestehenden HTML-Struktur, können Sie .closest() verwenden zu durchqueren bis zu sm-simple dann find() verwendet werden.

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