title: Previous occurrence of element in DOM using JQuery selector
body: <p>I'm wondering how to get the previous occurrence of a selector from an element regardless of where it is in the DOM tree. I'm assuming that the previous occurrence is not one of my original element's children.</p>
  
  <p>Example:</p>
  
  <pre><code>&lt;body&gt;
      &lt;p class="somethingImportant"&gt;Important&lt;/p&gt;
      &lt;h1&gt;
          &lt;p class="somethingImportant"&gt;Important too!&lt;/p&gt;
      &lt;/h1&gt;
  
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td id="start"&gt;Starting from here!&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I want to get the <code>&lt;p class="somethingImportant"&gt;Important too!&lt;/p&gt;</code> element, starting from the <code>&lt;td id="start"&gt;</code> element.</p>
  
  <p>I've tried using the <code>prev()</code> and <code>next()</code> in JQuery, but they only get immediate siblings. I tried the <code>closest()</code> one too, but that only gets ancestors. Notice how the element I want is a child of an ancestor.</p>
  
  <p>So, I tried something like <code>$("#start").closest(".somethingImportant").find(".somethingImportant")</code> and JQuery didn't return any results, mainly because <code>closest()</code> didn't I guess.</p>
  
  <p>I want something like <code>prevAll(".somethingImportant").last()</code>, just without the immediate sibling limitation.</p>
  
  <p>Has anyone else ran into this problem?</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>The problem I'm trying to solve is how to get the previous "page" or the previous "heading" from a start element. The start element is a "cursor" that highlights the node I'm on. I'll have the view scroll to that element later in my code.</p>
  
  <p>Here is a situation that it starts becoming a problem:</p>
  
  <pre><code>&lt;p class="pageNumber"&gt;1&lt;/p&gt;
  
  &lt;h1&gt;Kinds of Animals&lt;/h1&gt;
  
  &lt;p&gt;Here are different kinds of animals:&lt;/p&gt;
  
  &lt;table&gt;
      &lt;tr&gt;&lt;td&gt;Duck&lt;/td&gt;&lt;td&gt;Giraffe&lt;/td&gt;&lt;/tr&gt;
      &lt;tr&gt;&lt;td&gt;Anteater&lt;/td&gt;&lt;td&gt;&lt;span id="highlight"&gt;Badger&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/table
  </code></pre>
  
  <p>I'm starting from <code>`&lt;span id="highlight"&gt;</code>.  I want to get the previous element that matches the JQuery selector <code>p.pageNumber, h1, h2, h3, h4, h5, h6</code> no matter where it is nested in the DOM, as long as it's before the highlight. The selector matches all of the elements that I recognize as heading elements.</p>
  
  <p>In this case, it should return <code>&lt;h1&gt;Kinds of Animals&lt;/h1&gt;</code>.</p>
  
  <hr>
  
  <p><strong>Code Samples</strong></p>
  
  <p>Using Lee's solution, I was able to build a function that does a pretty good, yet elegant job of what I wanted it to do.</p>
  
  <pre><code>function GetPreviousOccurrence(elemSel, sel) {
      var selector = elemSel + ", " + sel;
      var prev;
      $(selector).each(function() {
          if ($(this).is(elemSel)) {
              return false;
          }
          prev = this;
      });
  
      return prev;
  }
  </code></pre>
  
  <p>In my case, <code>elemSel = "#highlight";</code> and <code>sel = "p.pageNumber, h1, h2, h3, h4, h5 , h6";</code> It might not be super performant, but at least it reads nice.</p>
  
  <p><em>Extra Note:</em> Lee's addendum is better.</p>