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

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

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

Answer 2

以下假设您的标记结构不会改变。您可以使用.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 似乎实际上绑定到focusinandfocusout而不是focusand blur。