jquery - Use prev for a distant selector -

i using zurb foundation , it's why getting issue. here's html code:

<div class="row collapse">     <label for="">login</label>     <div class="large-1 medium-1 small-2 columns">         <span class="prefix"><i class="fa fa-user"></i></span>     </div>     <div class="large-11 medium-11 small-10 columns">         <input type="text" />     </div> </div> 

i add class prefix span when focus on input. tried prev function, not work because of div in between.

here's jquery code:

$('input').focus(function() {     $(this).prev('.prefix').addclass('prefix-focus'); }); 

any idea can do?

thanks lot

1. traverse overall container using closest()
2. search span using find()

$('input').focus(function() {    $(this).closest('.row').find('.prefix').addclass('prefix-focus');  });

.prefix-focus {    background: green;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <div class="row collapse">    <label for="">login</label>    <div class="large-1 medium-1 small-2 columns">      <span class="prefix"><i class="fa fa-user">in prefix</i></span>    </div>    <div class="large-11 medium-11 small-10 columns">      <input type="text" />    </div>  </div>