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列表

回答

相关问题