針對每個「ul」中的第一個和最後一個「li」

Question

我想使用jQuery針對'ul'的第一個和最後一個'li'，並相應地爲它們添加一個「first」和「last」類。

我知道，使用jQuery這很容易，如果它只是一個簡單的'ul'，但如果'ul'嵌套在父'ul'中有多個'ul'，我正在用正確的語法掙扎。

下面是HTML標記的一個例子：

<ul> 
    <li><a href="#">Top Level Item</a> 
     <ul> 
      <li><a href="#">First Sub-Item</a></li> 
      <li><a href="#">Last Sub-Item</a> 
       <ul> 
        <li><a href="#">First Sub-Sub-Item</a> 
        <li><a href="#">Last Sub-Sub-Item</a></li> 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul> 

我需要針對所有各子UL的第一個和最後一個項目和應用類到每個人。

這是我一直在使用的，但它顯然不工作，因爲它僅將類名應用於第一個'li'和最後一個'li'。

jQuery('.topmenu ul li ul li').first().addClass('first'); 
jQuery('.topmenu ul li ul li').last().addClass('last'); 

有什麼建議嗎？

Answer 1

我假設你所展示的每一樣東西都與類「topmenu」有關。如果它是唯一的，我會建議將它更改爲ID，並將一個類應用於「第一個ul」，這樣就不必通過算法來避免。

$('.topmenu').find('ul ul li:first-child').addClass('first'); 
$('.topmenu').find('ul ul li:last-child').addClass('last'); 

http://jsfiddle.net/aBksB/2/

編輯：反映意見

Answer 2

嘗試使用CSS選擇第一胎和最後的孩子：

jQuery('.topmenu ul li ul li:first-child').addClass('first'); 
jQuery('.topmenu ul li ul li:last-child').addClass('last'); 

Answer 3

使用>你可以指定一個imediate的孩子，像這樣：

$('ul>li').first()

$('ul>li').last()

ul>li僅在內獲得li節點節點。

Answer 4

我想你想first-child和last-child：

jQuery('.topmenu ul li ul li:first-child').addClass('first'); 
jQuery('.topmenu ul li ul li:last-child').addClass('last'); 

Answer 5

您可以嘗試使用:first和:last選擇...

Answer 6

這是使用下面的代碼的example。

$('ul li ul').find('>li:first').addClass('first').end() 
    .find('>li:last').addClass('last');