js循环ul下第一个LI和最后一个LI，并加上class

<ul class="sub1">
<li class="drivers"><a href="">角色管理</a></li>
<li class="drivers"><a href="">用户管理</a></li>       
<li class="drivers"><a href="">部门管理</a></li>
<li class="drivers"><a href="">客户管理</a></li>
 </ul>

最后要的效果是这样的
<ul class="sub1">
<li class="drivers aaa"><a href="">角色管理</a></li>
<li class="drivers"><a href="">用户管理</a></li>       
<li class="drivers"><a href="">部门管理</a></li>
<li class="drivers bbb"><a href="">客户管理</a></li>
 </ul>

11 个解决方案

#1

jquery的

$('ul.sub1').each(function(){
  $(this).children(':first').addClass('aaa')
  $(this).children(':last').addClass('bbb')

})

#2

$("li:first").addClass("drivers aaa");
$("li:last").addClass("drivers bbb");

#3

该回复于2011-09-02 17:17:57被版主删除

#4

不用循环啊
<ul class="sub1" id="x">
<li class="drivers"><a href="">角色管理</a></li>
<li class="drivers"><a href="">用户管理</a></li>  
<li class="drivers"><a href="">部门管理</a></li>
<li class="drivers"><a href="">客户管理</a></li>
 </ul>

ls = document.getElementById("x").getElementsByTagName("li")
ls[0].className="drivers aa"
ls[ls.length-1].className="drivers bb"

#5

jquery:

$('ul.sub1 li:first').addClass("aaa")
$('ul.sub1 li:last').addClass("bbb")

#6

引用 5 楼 ycmjh2010 的回复:

jquery:

$('ul.sub1 li:first').addClass("aaa")
$('ul.sub1 li:last').addClass("bbb")

用jquery就用五楼的，你是不是忘了加载jquery库了

#7

引用 4 楼 net_lover 的回复:

不用循环啊
<ul class="sub1" id="x">
<li class="drivers"><a href="">角色管理</a></li>
<li class="drivers"><a href="">用户管理</a></li>  
<li class="drivers"><a href="">部门管理</a></li>
<li class="drivers"><a href……

一般js就用这个。

#8

lis = document.getElementById("x").getElementsByTagName("li");
lis[0].className="drivers aaa";
lis[lis.length-1].className="drivers bbb";

#9

引用 1 楼 calmcrime 的回复:

jquery的

$('ul.sub1').each(function(){
  $(this).children(':first').addClass('aaa')
  $(this).children(':last').addClass('bbb')

})

++++

#10

引用 4 楼 net_lover 的回复:

不用循环啊
<ul class="sub1" id="x">
<li class="drivers"><a href="">角色管理</a></li>
<li class="drivers"><a href="">用户管理</a></li>  
<li class="drivers"><a href="">部门管理</a></li>
<li class="drivers"><a hre……

+++

#11

顶4楼。空的文本结点真麻烦。
var target=document.getElementsByTagName('ul')[0];
 var childs=target.childNodes;
 
 var firstN=target.firstChild;
 if(firstN.nodeType!=1) firstN=childs.item(1);

 var lastN=target.lastChild;
 
 if(lastN.nodeType!=1) lastN=childs.item(childs.length-2);
 
 firstN.className+=' aaa';
 lastN.className+=' aaa';