Search Up DOM from a given element using jquery
<p>In jquery, I'm trying to find a way to search up the dom until it finds the selector.  For example.</p>

<p>Provided this structure:</p>

<pre><code>&lt;span data-type="contact" data-filter="4" id="buyer-lookup" class="uneditable-input contact-lookup" data-original-title="" title=""&gt;Jeff&lt;/span&gt;
&lt;div class="popover"&gt;
   &lt;div class="arrow"&gt;&lt;/div&gt;
   &lt;h3 class="popover-title"&gt;&lt;strong&gt;Jeff&lt;/strong&gt;&lt;/h3&gt;
   &lt;div class="popover-content"&gt;
      &lt;address style="margin:0;"&gt; MO&lt;br&gt;&lt;/address&gt;
      &lt;a data-id="70" data-type="contact" class="pull-right edit-contact" href="#"&gt;Edit&lt;/a&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
   &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>On click of '.edit-contact' I'd like to search up until I find 'span.contact-lookup'.  I can use parent a couple of times to get what I want like below, but is there a cleaner way so that you can just specify $(this).searchUpFunction('span.contact-lookup'); so it would start at this and search up until it finds span.contact-lookup?  .prev doesn't seem to search up parents.</p>

<pre><code>$('.edit-contact').click(function(){
       var filter = $(this).parent().parent().prev('span.contact-lookup').data('filter');
       alert(filter);
    });
</code></pre>
