JQuery find class name elements inside one container

Question

I have a UserControl in MVC that can repeat many times on a page.

Say I had something like the following:

<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>

How can I find an element class="comments"that is in the same div as a link class="enableTextBox"in the onclick event of the link?

Is this a smart way to handle element identifier conflicts? Is there a better way? How safe is it in terms of working in a corporate application and be sure of data consistency?

Answer 1

jQuery .siblings() :

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

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

jQuery :

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

EDIT: return false;, .

, : 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
})