Question

HTML :

<div class="group">
    <div class="link"><a class="add_link" href="javascript:">add</a></div>
    <p class="values">test....</p>
    <input type="text" class="box1" value="10" />
    <input type="text" class="box2" value="20" />
    <input type="text" class="box3" value="30" />
    <input type="text" class="final" value="100" />
</div>

<div class="group">
    <div class="link"><a class="add_link" href="javascript:">add</a></div>
    <p class="values">test....</p>
    <input type="text" class="box1" value="5" />
    <input type="text" class="box2" value="10" />
    <input type="text" class="box3" value="15" />
    <input type="text" class="final" value="700" />
</div>
<div class="group">
    <div class="link"><a class="add_link" href="javascript:">add</a></div>
    <p class="values">test....</p>
    <input type="text" class="box1" value="103" />
    <input type="text" class="box2" value="230" />
    <input type="text" class="box3" value="350" />
    <input type="text" class="final" value="770" />
</div>

jQuery:

$('.add_link').click(function(){

    value=$(this).parent('div').next('p').next('input.box1').next('input.box2').next('input.box3').next('input.final').val();
    alert(value);

});

jsFiddle : http://jsfiddle.net/Thn6A/

When I click the element with class add_link, I want to select its group’s class final value. I had written the above code for it, and that seems to work, but I would like a more direct selector for targeting the element.

Answer 1

There are a number of ways, but I would say this is the easiest:

$('.add_link').click(function(event){
    event.preventDefault(); //Instead of href="javascript:"
    var value = $(this).closest(".group").find(".final").val();
    alert(value);
});

Also, you can use the event object to prevent the default action of the click, instead of adding it to your href attribute.

Read more: http://api.jquery.com/closest