How can I find the closest previous sibling with class using jQuery?

html, jquery, traversal, tree-traversal

Solution

Try:

$('li.current_sub').prevAll("li.par_cat:first");

Tested it with your markup:

$('li.current_sub').prevAll("li.par_cat:first").text("woohoo");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="par_cat"></li>
  <li class="sub_cat"></li>
  <li class="sub_cat"></li>
  <li class="par_cat">// this is the single element I need to select</li>
  <li class="sub_cat"></li>
  <li class="sub_cat"></li>
  <li class="sub_cat current_sub">// this is where I need to start searching</li>
  <li class="par_cat"></li>
  <li class="sub_cat"></li>
  <li class="par_cat"></li>
</ul>

will fill up the closest previous `li.par_cat` with "woohoo".

Problem

Here's the rough HTML I get to work with: ``` <li class="par_cat"></li> <li class="sub_cat"></li> <li class="sub_cat"></li> <li class="par_cat"></li> // this is the single element I need to select <li class="sub_cat"></li> <li class="sub_cat"></li> <li class="sub_cat current_sub"></li> // this is where I need to start searching <li class="par_cat"></li> <li class="sub_cat"></li> <li class="par_cat"></li> ``` I need to traverse from the `.current_sub`, find the closest previous `.par_cat` and do stuff to it. `.find("li.par_cat")` returns the whole load of `.par_cat` (I've got about 30 on the page). I need target the single one.

Original source