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 item of that groups. example follow this link for example

Here is my HTML code.

Here is my approach.

$('.liclk').click(function(){
    $(this).find("li").last().css( "background-color", "red" );
});

My solution is selecting last li but not the deepest.

I am beginner in jquery.

In your html example what is the deepest element you want to select in each situation? — Alex Char, Oct 23 '15 at 09:07
No,I am looking for a general solution. That should work in any level. — Rajib Hossen, Oct 23 '15 at 09:07
Try this: http://stackoverflow.com/questions/19259029/using-jquery-is-there-a-way-to-find-the-farthest-deepest-or-most-nested-child — K K, Oct 23 '15 at 09:15

George · Accepted Answer · 2015-10-23T09:35:55.380

5

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

edited Oct 23 '15 at 09:35

answered Oct 23 '15 at 09:17

George

36,413
9
66
103

George really nice approach but take a look here [fiddle](http://jsfiddle.net/6ax4ggv2/) – Alex Char Oct 23 '15 at 09:31
@AlexChar Removed `.last()` from `.find('ul')`. – George Oct 23 '15 at 09:34
@A.Wolff You refer that i'm missing a closing `li` or I am missing something else? – Alex Char Oct 23 '15 at 09:39
@AlexChar Ya you were just missing closing LI but in fact that's valid HTML (closing LI optional) if i'm not wrong, so my bad EDIT: indeed it is: http://www.w3.org/TR/2014/REC-html5-20141028/syntax.html#optional-tags – A. Wolff Oct 23 '15 at 09:40

An0nC0d3r · Answer 2 · 2015-10-23T09:16:46.463

0

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");
    });

edited Oct 23 '15 at 09:16

answered Oct 23 '15 at 09:10

An0nC0d3r

1,275
13
33

Your solution is also marking the unnecessary li. I just need to mark the deepest. http://s21.postimg.org/gyjcri2vb/sol1.png Please see the image..if I click on item II it should only mark item 3. and if i click on item III it should mark only item 5.2. – Rajib Hossen Oct 23 '15 at 09:16
By deepest, do you mean the last li, inside the last ul of the ul that has been clicked? – An0nC0d3r Oct 23 '15 at 09:18
Yes. thats what exactly I want. btw thanks @AdamJeffers. – Rajib Hossen Oct 23 '15 at 09:55

John C · Answer 3 · 2015-10-23T09:51:49.207

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>

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

3 Answers3

Linked

Related