2

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の要素をクリックすると、そのグループのクラスの最終値を選択したいと思います。私は上記のコードを書きましたが、それはうまくいくようですが、要素をターゲットにするためのより直接的なセレクターが必要です。

4

4 に答える 4

3

いくつかの方法がありますが、これが最も簡単だと思います：

$('.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

于 2012-09-24T05:43:12.977 に答える
1

次のように実行できます。 

$('.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();

于 2012-09-24T05:47:51.247 に答える
0

last-child任意のタグの最後の値を取得するために使用できます。

これをチェックしてくださいhttp://jsfiddle.net/2u4SM/

于 2012-09-24T05:54:36.623 に答える
0

これを試して

$('.add_link').click(function(){
        value=$(this).parent('div').siblings('input.final').val();
        alert(value);    
});
于 2012-09-24T05:45:49.980 に答える