Question

我有一个程序循环相同<div>多次。

<div class="check"><input type="hidden" class="value" value="1" />Click 1</div>
<div class="check"><input type="hidden" class="value" value="2" />Click 2</div>
<div class="check"><input type="hidden" class="value" value="3" />Click 3</div>
<div id="result"></div>

在上面的HTML代码中，每个<div>和<input>标记都有相同的类名，那么如何才能访问仅被点击的类的输入值。

我正在使用以下JQuery但只获得相同的值。

$('.check').click(function(){
var ans =    $('.value').val();
    $('#result').html(ans);
});

演示：http://jsfiddle.net/hyvto0aa/

Answer 1

var result = $('#result');

$('.check').on('click',function(){
    $(result).html($(this).find('.value').val());
});

Answer 2

当您输入$('.value')时，您会获取所有.value个项目 - 当您要求.val()时，您会获取列表中第一个的值。

试试这个：

$('.check').click(function(){
    var ans = $(this).find('.value').val();
    $('#result').html(ans);
});

$(this)是被点击的元素，使用.find会找到恰好位于其中的.value。

Answer 3

添加上下文：

$('.check').click(function(){
    var ans = $('.value', $(this)).val();
    $('#result').html(ans);
});

Answer 4

添加上下文并使用find() jQuery方法：

$('.check').click(function(){
    var ans = $(this).find('.value').val();
    $('#result').html(ans);
});

参见 Demo

Answer 5

而不是

$('.check').click(function(){
    var ans =    $('.value').val();
    $('#result').html(ans);
});

你可以用这个：

$('.check').click(function(){
    var ans = $(this).children()[0].val(); // <-- This is the value for selected div
    $('#result').html(ans);
});

在Jquery中单击外部div时获取内部输入标记的值

5 个答案: