使用jQuery查找ul列表中任何li塊中最深和最後的li？

我有一個HTML列表。有幾個嵌套的ul和li。當我點擊一個li時，我想在該li標籤中找到最深的項目，其中沒有ul標籤，li是該組的最後一個項目。示例follow this link for example 使用jQuery查找ul列表中任何li塊中最深和最後的li？

這是我的HTML代碼。

這是我的方法。

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

我的解決方案是選擇最後的li，但不是最深的。

我是jquery的初學者。

來源

2015-10-23 Rajib Hossen

有多少可能的水平？總是3，或者可能是 – AdamJeffers

在你的html例子中，你想在每種情況下選擇最深的元素是什麼？ –

不，我正在尋找一個通用的解決方案。這應該在任何級別上運行。 –

使用while繼續尋找一個下降ul，當它可以找到沒有更多的內選擇最後一個列表項和應用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

來源

2015-10-23 09:17:08 George

喬治真的很好的方法，但看看這裏[小提琴]（http://jsfiddle.net/6ax4ggv2/） –

@AlexChar從'.find（'ul'）''刪除'.last（）'。 – George

幹得好。 +1 :) –

像這樣的東西應該做的伎倆......

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

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

來源

2015-10-23 09:10:43 AdamJeffers

你的解決方案也標誌着不必要的李。我只需要標記最深。 http://s21.postimg.org/gyjcri2vb/sol1.png 請查看圖片..如果我點擊第二項，它應該只標記項目3.如果我點擊第三項，它應該只標記項目5.2。 –

最深的是，你是指最後一個li，在被點擊的ul的最後一個ul裏面？ – AdamJeffers

Ahhhh ....那麼你應該使用@ George的方法 – AdamJeffers

它看起來像你這是用最大深度去年最後一個項目（所以如果元素之後有兩個項目具有相同的深度，但發現在不同的ul的你想要的最後一個）。你可以遍歷所有沒有ul的li，並保存最大數量的父母。一旦你完成了所有的事情，就應用你的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>

來源

2015-10-23 09:29:16

使用jQuery查找ul列表中任何li塊中最深和最後的li？

回答

相關問題