Version plus courte pour la traversée DOM

Question

J'ai un événement click sur une classe .child. Je veux atteindre le .productHolder div de cette classe. Maintenant j'ai un sélecteur vraiment long. Je me demandais s'il y avait une version plus courte pour ce faire.

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

Avec votre structure HTML existante, vous pouvez utiliser .closest() pour parcourir jusqu'à sm-simple alors find() peut être utilisé.

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