当前位置 : 主页 > 网页制作 > JQuery >

JQuery CSS选择第一个和最后一个LI表格UL列表

来源:互联网 收集:自由互联 发布时间:2021-06-15
请使用 JQuery CSS选择器寻求帮助.我想从主UL列表中识别第一个和最后一个LI并更改CSS类.第一个应该是 class =“grid_4 alpha” 和最后一个 class =“grid_4 omega” ul li id="linkcat-2" class="grid_4 this
请使用 JQuery CSS选择器寻求帮助.我想从主UL列表中识别第一个和最后一个LI并更改CSS类.第一个应该是
class =“grid_4 alpha”
和最后一个
class =“grid_4 omega”

<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函数.

非常感谢 – 如果需要,我可以为主人ul添加一个id

使用:first-child和:last-child with the 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和alpha类的所有列表元素.

网友评论