Более короткая версия для перемещения DOM

Question

У меня есть событие click на классе .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:

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

Answer 1

С существующей HTML структуры, вы можете использовать .closest() пройти до sm-simple затем find() могут быть использованы.

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