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 类的元素时，我想选择其组的类最终值。我已经为它编写了上面的代码，这似乎有用，但我想要一个更直接的选择器来定位元素。

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(){
  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 3

试试这个

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

Answer 4

您可以使用last-child获取任何代码的最后一个值。

查看http://jsfiddle.net/2u4SM/

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

4 个答案: