jqueryクラスで最初の子を選択

Question

クリックした要素の最初の子を選択する必要があり、クリックリスナーはクラス "テスト"に結びつけられている必要があります。これどうやってするの？

<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); 
}); 

は問題 https://jsfiddle.net/6zudq9wy/

Answer 1

jQueryのはその最初の子供第一および出力を選択しますので、あなたは、クリック機能内のすべてのtestクラスの要素を参照しているを示していjsfiddleです。代わりに、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>