jQuery - trouver 1er élément avec une classe spécifique d'en haut, mais pas avant un autre élément

Question

Le HTML ressemble à ceci:

<li class="divider"> 
    <div> 
    ...(maybe more divs)...  
     <div class="content"> 
     ...(maybe more divs)... 
     <a href="#" class="link">LINK</a> 

... 

comment puis-je choisir la DIV .content, à partir d'une fonction jQuery accroché sur le lien? Notez que j'ai plusieurs listes comme ceci, et dans certains d'entre eux div.content pourrait être manquant, ainsi je veux sélectionner cette div seulement si elle existe dans le bloc courant (li.divider).

J'ai essayé avec $link.parent().parent().find('content') mais il échoue dans certains cas, parce que le nombre d'éléments entre ces 2 éléments peuvent changer ...

Answer 1

Si elles ne sont pas imbriqués, vous devriez être en mesure de le faire:

$('a.link').click(function() { 
    $(this).closest('div.content'); 
}); 

ou

$('a.link').click(function() { 
    $(this).parents('div.content:first'); 
}); 

Si elles sont imbriquées, alors vous devrez peut-être faire quelque chose comme ceci:

$('a.link').click(function() { 
    $(this).closest('li.divider').find('div.content'); 
}); 

... de sorte que s'il y a imbrication en cours, et il n'y a pas div.content dans l'actuel, vous ne serez pas finir par la sélection d'un ancêtre div.content plus lointain.

• http://api.jquery.com/closest/
• http://api.jquery.com/parents/

Answer 2

$link.parent(".content")?

Answer 3

Utilisez le sélecteur closest ...

var parentContent = $(this).closest("div.content"); 

if(parentContent.length > 0) { 
    alert("DIV was found!"); 
}