Locating child of a nearby ancestor with jQuery I have the following markup, and I'm wondering how best to locate the nearest previous dpicker input element and give it focus with jQuery when a.dpicon is clicked.

&lt;div class="eight mobile-two columns"&gt;
  &lt;input autocomplete="off" class="dpicker" type="text" name="mdpdate" id="mdpdate"&gt;
&lt;/div&gt;
&lt;div class="one mobile-one columns"&gt;
  &lt;span class="postfix"&gt;
    &lt;a href="#" id="startdatecalicon" class="dpicon"&gt;&lt;i class="foundicon-calendar infoicon"&gt;&lt;/i&gt;&lt;/a&gt;
  &lt;/span&gt;
&lt;/div&gt;


I've used this, and it works, but it seems pretty cumbersome:

$(".dpicon").click(function(){
  $(this).parent().parent().prev().children(".dpicker").focus();
});


Also, there will be times that the 'dpicon' element will be before the input in markup, not after it. Is there a way to catch both instances?
I would make the link between the 2 implicit.

&lt;a href="#mdpdate" id="startdatecalicon" class="dpicon"&gt;

Then the code is 

$(".dpicon").click(function(){
  $( this.href ).focus()
}


It is a creative (ab)use of href, but it still follows the spirit in my mind.

If you have the luxury of going HTML5, you can go with a data attribute.

&lt;a href="#" id="startdatecalicon" class="dpicon" data-dpicker="#mdpdate"&gt;

Then the code is 

$(".dpicon").click(function(){
  $( this.getAttribute( "data-dpicker" ) ).focus()
}