jquery wähle das erste Kind nach Klasse

Question

Ich muss das erste Kind des angeklickten Elements auswählen und mein Klick-Listener muss an die Klasse "test" gebunden sein. Wie kann ich das machen?

<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> 

Ich versuche, diese aber es ist immer 1 zurück.

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

Hier ist jsfiddle, die das Problem https://jsfiddle.net/6zudq9wy/

Answer 1

Sie verweisen alle test Klasse Elemente in der Klick-Funktion zeigt, so jQuery wird die erste und die Ausgabe seiner ersten Kinder holen. Stattdessen verweisen this:

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

Answer 2

Sie so etwas wie dies bedeuten:

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