Find the deepest and the last li in any li blocks in a ul li list using jquery?

Question

I have a list in HTML. There are several nested ul and li.When I click on a li, I want to find a deepest item in that li tag that has no ul tag inside and the li is the last

Answer 1

Use while to keep looking for a descending ul and when it can find no more, select the last list item within and apply CSS:

$('.liclk').click(function(){
    var $current = $(this).find('ul'),
        $desc = $current;
    while($desc.length){
        $current = $desc;
        $desc = $current.find('ul');
    }
    $current.find('li').last().css('background-color' ,'red')
});

JSFiddle

Answer 2

It looks like you are after the element which is last last item with the greatest depth (so if there are two items with equal depth but found in different ul's you want the last one). You could loop through all li's that don't have a ul and save the last one with the greatest quantity of parents. Once you've gone through everything just apply your CSS.

$('.liclk').click(function() {
  var parentCount = 0;
  var $deepEl;
  $(this).find("li:not(:has(ul))").each(function(index, me) {
    if ($(me).parents().length >= parentCount) {
      parentCount = $(me).parents().length;
      $deepEl = me;
    }
  });
  $($deepEl).css("background-color", "red");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="level-1">
  <li class="item-i liclk">I</li>
  <li class="item-ii liclk">II
    <ul class="level-1-1">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-1-1-1">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii liclk">III
    <ul class="level-2">
      <li class="item-4 ">4</li>
      <li class="=item-5 ">5
        <ul class="level-2-1">
          <li class="item-5-1">5.1</li>
          <li class="item-5-2">5.2</li>
        </ul>
        <li class="item-5-2">5.3</li>
      </li>
    </ul>
  </li>
</ul>

Answer 3

Something like this should do the trick...

    $('.liclk').click(function() {

        var el = $(this).find("ul:last-child").find('li:last-child').css("background-color", "red");
    });