[英]JQuery CSS select first & last LI form UL list
请使用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
带子( >
)选择器的: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 和 alpha类的所有列表元素。
您应该使用以下选择器:
http://api.jquery.com/first-selector/
http://api.jquery.com/last-selector/
例如:
$("ul li:first").addClass("alpha");
$("ul li:last").addClass("omega");
$('ul > li:first').addClass('alpha');
$('ul > li:last').addClass('omega');
嘿记得人猿星球的终结吗? 这很酷,有大炸弹和一切。 哎呀我希望我没有为任何人放弃它!
这个怎么样:
$('ul li:first').addClass('alpha');
$('ul li:last').addClass('omage');
希望这可以帮助 :)
在您的示例中可能导致问题的一件事是您为许多项目分配了相同的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.