jQuery rechercher des éléments de nom de classe dans le même conteneur

Question

J'ai un UserControl dans MVC qui peut être répété plusieurs fois sur la page.

Dire que j'avais quelque chose comme ce qui suit:

<div> 
    <a href="#" class="enableTextBox">edit</a>" 
    <input type="text" class="comments" readonly="readonly" /> 
</div> 

<div> 
    <a href="#" class="enableTextBox">edit</a>" 
    <input type="text" class="comments" readonly="readonly" /> 
</div> 

<div> 
    <a href="#" class="enableTextBox">edit</a>" 
    <input type="text" class="comments" readonly="readonly" /> 
</div> 

Comment puis-je trouver l'élément class="comments" qui est dans le même div que le lien class="enableTextBox", en cas onclick du lien?

Est-ce un moyen sensé de gérer les conflits d'éléments? Y a-t-il un meilleur moyen? Dans quelle mesure serait-il sécurisé en termes de fonctionnement dans une application d'entreprise et en étant certain de la cohérence des données?

Answer 1

En utilisant la méthode .siblings() jQuery est une façon:

$('.enableTextBox').click(function() { 
    var $comments = $(this).siblings('.comments'); 
    return false; // Prevent page refresh 
}); 

• http://api.jquery.com/siblings/

Il y a beaucoup de méthodes traversal disponibles dans jQuery:

• http://api.jquery.com/category/traversing/

EDIT: Ajouté pour empêcher le lien d'actualiser la page.

Voici un exemple, vous pouvez tester: http://jsfiddle.net/MZEmP/

Answer 2

$(".enableTextBox").click(function() { 
    $(".comments", $(this).parent()) //this will get you the comments associated with the anchor you click on 
})