title: jQuery find previous li with certain class
body: <p>I got the following html:</p>
  
  <pre><code>&lt;ul class="dropdown-menu inner"&gt;
    &lt;li class="dropdown-header" data-optgroup="1"&gt;&lt;a&gt;&lt;/a&gt;Header1&lt;/li&gt;//this is needed
    &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;//I am here
    &lt;li class="dropdown-header" data-optgroup="2"&gt;&lt;a&gt;&lt;/a&gt;Header2&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I need to get <code>li</code> with class <code>dropdown-header</code> which is upper to the clicked <code>li a</code>. If <code>li</code> with class <code>dropdown-header</code> clicked, it should be ignored. Here <code>li</code> with <code>data-optgroup</code> 1 should be selected. I tried the following:</p>
  
  <pre><code>$(document).on('click', 'li a', function (e) {
      var html = $($this[0].parentNode).prev('.dropdown-header');//closest()?
      console.log($($this[0].parentNode).html());
  });
  </code></pre>
  
  <p>but it is saying it cannot find my <code>dropdown-header</code> so it is <code>undefined</code>. Any ideas would be welcome.</p>