JQuery CSS選擇第一個和最後一個LI表單UL列表

尋找一些幫助，請使用JQuery CSS選擇器。我想識別主UL列表中的第一個和最後一個LI，並更改CSS類。首先應 class="grid_4 alpha" 最後 class="grid_4 omega"JQuery CSS選擇第一個和最後一個LI表單UL列表

<ul> 
    <li id="linkcat-2" class="grid_4 this should be alpha"><h4 class="widgettitle">Blogroll</h4> 
    <ul class='xoxo blogroll'> 
     <li><a href="http://wordpress.com/">WordPress.com</a></li> 
     <li><a href="http://wordpress.org/">WordPress.org</a></li> 
    </ul> 
</li> 
<li id="linkcat-2" class="grid_4"><h4 class="widgettitle">Blogroll</h4> 
<ul class='xoxo blogroll'> 
    <li><a href="http://wordpress.com/">WordPress.com</a></li> 
    <li><a href="http://wordpress.org/">WordPress.org</a></li> 
</ul> 
</li> 
<li id="linkcat-2" class="grid_4"><h4 class="widgettitle">Blogroll</h4> 
<ul class='xoxo blogroll'> 
    <li><a href="http://wordpress.com/">WordPress.com</a></li> 
    <li><a href="http://wordpress.org/">WordPress.org</a></li> 
</ul> 
</li> 
<li id="linkcat-2" class="grid_4 this should be omega"><h4 class="widgettitle">Blogroll</h4> 
<ul class='xoxo blogroll'> 
    <li><a href="http://wordpress.com/">WordPress.com</a></li> 
    <li><a href="http://wordpress.org/">WordPress.org</a></li> 
</ul> 
</li> 
</ul>

我只是不能得到正確的JQuery.css函數的工作。

幫助非常感激 - 我可以添加一個ID，主UL如果requyired

來源

2010-02-15 russell

使用:first-child和:last-child與孩子（>）選擇：

$("#master > :first-child").addClass("grid_4 alpha"); 
$("#master > :last-child").addClass("grid_4 omega");

記住，類不能有他們的空間。此標記：

<li class="grid_4 alpha">...

定義了具有類的列表元素。如果你想選擇它，你可以使用：

$("li.grid_4.alpha")...

含義選擇既具有grid_4 和阿爾法類的所有列表元素。

來源

2010-02-15 15:22:06 cletus

這當然假定master'的的'一個id頂級名單上。 – cletus 2010-02-15 15:32:43

輕微改動，但$ j（'＃headline> li：first'）。addClass（'alpha'）; $ j（'＃headline> li：last'）。addClass（'omega'）;爲我工作（更改#master爲#headline =謝謝 – russell 2010-02-15 15:35:08

@russell：你希望'first-child'和'：last-child'不是'：first'和'：last'。你需要了解其中的差異，否則你會被咬傷，當你說有多個父母時，會出現這種情況，最終你會選擇第一個父母的第一個孩子和最後一個父母的最後一個孩子，之間。 – cletus 2010-02-15 15:49:39

您應使用以下選擇：

http://api.jquery.com/first-selector/

http://api.jquery.com/last-selector/

例如爲：

$("ul li:first").addClass("alpha"); 
$("ul li:last").addClass("omega");

來源

2010-02-15 15:22:15 brainfck

除了注意最後的li有它自己的ul--所以你的第一個選擇器也會選擇第一個li！ – Pointy 2010-02-15 15:24:20

此選擇器還將alpha和omega類添加到列表中每個ul的第一個和最後一個li子。頂端的ul應該有一個ID或類來標識它。 – PetersenDidIt 2010-02-15 15:26:02

這顯然是錯誤的。嘗試一下。第二個將該類添加到xoxo blogroll子列表的最後一個列表元素。嘗試在該標記上運行'$（「ul li：last」）.css（「background」，「yellow」）'，看看會發生什麼。 – cletus 2010-02-15 15:26:56

如何：

$('ul li:first').addClass('alpha'); 
$('ul li:last').addClass('omage');

希望這有助於:)

來源

2010-02-15 15:22:31

您確實需要使用「ul> li：first」來避免在最後一個外部列表項中的sub-UL塊中標記第一個「li」。 – Pointy 2010-02-15 15:26:26

這與其他相同答案錯誤的原因是錯誤的。 – cletus 2010-02-15 15:29:47

$('ul > li:first').addClass('alpha'); 
$('ul > li:last').addClass('omega');

嘿記得年底下方行星的類人猿？這很酷，有了大炸彈和一切。哎呀，我希望我沒有放棄任何人！這可能會導致你在你的例子有問題

來源

2010-02-15 15:22:37 Pointy

錯錯了錯。我經常看到這個錯誤。 '：first'和'：last'不會做你認爲他們做的事。你想'：第一個孩子'和'：最後一個孩子' – cletus 2010-02-15 15:29:10

嗯，我明白他們是不同的，但你能解釋一下在這種情況下可能會有什麼不同（假設正確的標記）嗎？「ul」標籤的唯一有效孩子無論如何都是「li」標籤，並且選擇器具有明確的「>」來限制關係的深度。（哦，我明白，選擇器中的裸「ul」應該包含最外面塊的id值;我沒有記下那個，但顯然這就是你想要的，失敗了一些其他方式來唯一地定位它。） – Pointy 2010-02-15 15:53:27

的一件事是你指定了相同的ID給許多項目：

id="linkcat-2"

的ID應該是唯一的。

然而，這是你如何選擇第一個和最後：

<ul id="main"> 
    <li>One</li> 
    <li>Two 
     <ul> 
      <li>Two A</li> 
      <li>Two B</li> 
     </ul> 
    </li> 
    <li>Three</li> 
    <li>Four 
     <ul> 
      <li>Two A</li> 
      <li>Two B</li> 
     </ul> 
    </li> 
</ul> 

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
    alert($("#main > :first-child").text()); 
    alert($("#main > :last-child").text()); 
</script>

來源

2010-02-15 15:24:13 Fenton

現在在主列表的最後一個元素中添加一個子列表，你會明白爲什麼這是錯誤的。 – cletus 2010-02-15 15:31:00

JQuery CSS選擇第一個和最後一個LI表單UL列表

回答

相關問題