Question

Any idea how I can show/hide only the child ‘.link’, from each list item, when the relevant input field is focused/blurred.

Something like the following, but I’m unsure how to apply (this) to it?

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

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

Markup:

<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

The following assumes the structure of your markup is not going to change. You can use .parent() to get the parent element, .next() to get the following sibling, and .children() to get a child element. You can combine both event handlers into one, and improve efficiency by delegating the event handler higher up the DOM tree:

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

Note that the event type check is looking for focusin – jQuery appears to actually bind to focusin and focusout rather than focus and blur.