Nächste Klasse ausblenden, wenn Datei ausgewählt/geändert wird

Question

Angenommen, ich habe folgenden HTML-Code.

<div> 
    <label>Test1</label> 
    <input type="file"> 
    <a href="#" class="selected-file"></a> 
</div> 
<div> 
    <label>Test2</label> 
    <input type="file"> 
    <a href="#" class="selected-file"></a> 
</div> 
<div> 
    <label>Test3</label> 
    <input type="file"> 
    <a href="#" class="selected-file"></a> 
</div> 

Was ich brauche, ist, dass, wenn jemand ändert/wählt eine Datei dann sollte die nächste <a> verstecken. Ich habe versucht, so etwas wie dies unter

$(function() { 
    $("input:file").change(function(){ 
     $(this).closest(".selected-file").hide() 
    }); 
}); 

zu tun, aber dies den <a> Tag nicht verbergen. Wie kann ich das schaffen?

Answer 1

closest() verwendet wird, um das nächste übergeordnete Element passend zu dem vorgesehenen Selektor zu finden. Stattdessen kann, wie die a ein Geschwister des input ist, können Sie next() verwenden:

$("input:file").change(function(){ 
    $(this).next(".selected-file").hide() 
}); 

Answer 2

closest können Sie ein übergeordnetes Element auswählen. Was Sie wollen, ist es, die Geschwister wählen:

$(this).siblings(".selected-file").hide()