title: Opposite to jQuery's .Closest (Top/Far-Most?)
body: <p>I have a code with lots of submenus that share the same class name.</p>
  
  <p>Here's a structure:</p>
  
  <pre><code>.menu
    .sub-menu
    .sub-menu
      .sub-menu
      .sub-menu
    .sub-menu
      .sub-menu
        .elem
        .elem
    .sub-menu
  </code></pre>
  
  <p>Note that <code>.sub-menu</code> may be infinite levels deep.</p>
  
  <p>So how do I achieve this: when <code>.elem</code> is clicked, I want to travers the DOM upwards until the top-most <code>.sub-menu</code> is reached and apply a style to it. I am aware of <code>.closest()</code> and <code>.parent()</code> and <code>.find()</code>, but I have no idea if jQuery has such feature such as <code>.topMost(selector)</code>?</p>
  
  <p>The only way I can think of is maybe running a loop and going through <code>.closest('.sub-menu')</code> of the new element until its length is zero (there are no more parents with this class, so it must be the top-most). However, I think there should be a more practical approach to this.</p>