如何选择不是我当前元素的直接祖先的元素？

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/

当我点击元素与类add_link，我要选择的组类final value。我已经为它写了上面的代码，这似乎工作，但我想要一个更直接的选择器来定位元素。

Answer 1

有多种方式，但我会说这是最简单的：

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

此外，您还可以使用event对象，以防止点击的默认操作，而不是将它添加到您的href属性。

了解更多：http://api.jquery.com/closest

Answer 2

试试这个

$('.add_link').click(function(){ 
     value=$(this).parent('div').siblings('input.final').val(); 
     alert(value);  
}); 

Answer 3

你可以这样说：

$('.add_link').click(function(){ 
    var value=$(this).parent().siblings('.final').val(); 
    alert(value);   
}); 

工作演示： http://jsfiddle.net/saji89/Wcs7t/

的不同方法的比较： http://jsperf.com/closest-find-vs-parent-siblings

找到最快的方法是：
var value=$(this).parent().find('.final').val();

Answer 4

您可以使用last-child得到任何标签的最后一个值。

看看这个了http://jsfiddle.net/2u4SM/