jquery按类选择第一个孩子

Question

我需要选择单击元素的第一个孩子，并且我的点击监听器必须绑定到“test”类。我怎样才能做到这一点？

<span class="test">click<input type="text" value="1"></span> 
<span class="test">click<input type="text" value="2"></span> 
<span class="test">click<input type="text" value="3"></span> 
<span class="test">click<input type="text" value="4"></span> 

我正在尝试这个，但它总是返回1。

$(".test").click(function(){ 
    $test = $(".test").children("input[type='text']:first").val(); 
    alert($test); 
}); 

这里的jsfiddle演示该问题 https://jsfiddle.net/6zudq9wy/

Answer 1

你引用的点击功能中的所有test类元素，所以jQuery将选择第一个和输出它的第一批孩子。相反，参考this：

$(".test").click(function(){ 
    $test = $(this).children("input[type='text']:first").val(); 
    alert($test); 
}); 

Answer 2

你的意思是这样的：

$(".test").click(function(){ 
 
    alert ($(this).children().eq(0).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<span class="test">click<input type="text" value="1"></span> 
 
    <span class="test">click<input type="text" value="2"></span> 
 
    <span class="test">click<input type="text" value="3"></span> 
 
    <span class="test">click<input type="text" value="4"></span>