jQuery在动态列表中只显示/隐藏孩子

Question

任何想法当相关输入字段被聚焦/模糊时，我只能从每个列表项中显示/隐藏孩子的'.link'。

类似以下内容，但我不确定如何应用（this）它？

$('.input').focus(function() { 
    $('li').next('.link').show(); 
}); 

$('.input').blur(function() { 
    $('li').next('.link').hide(); 
}); 

标记：

<ul> 
    <li> 
    <input class="input" value="1"> 
    </li> 

    <li"> 
    <a class="link" href="#"></a>   
    </li> 
</ul> 

<ul> 
    <li> 
    <input class="input" value="2"> 
    </li> 

    <li> 
    <a class="link" href="#"></a>   
    </li> 
</ul> 
etc. 

Answer 1

以下假定您的标记的结构不会改变。您可以使用.parent()获取父元素.next()以获取以下兄弟元素，并使用.children()获取子元素。你既可以事件处理程序合并成一个，并通过委派事件处理程序越往上DOM树提高效率：

$("ul").on("focus blur", ".input", function (e) { 
    var method = e.type === "focusin" ? "show" : "hide"; 
    $(this).parent().next().children(".link")[method](); 
}); 

注意，事件类型检查，寻找focusin - jQuery的出现实际上绑定到focusin和focusout而不是focus和blur。

Answer 2

如果你的结构肯定是如上，那么你可以简单地使用父母和未来......

$('.input').focus(function() { 
    $(this).parent().next().find(".link").show(); 
}); 

$('.input').blur(function() { 
    $(this).parent().next().find(".link").hide(); 
});