Jquery实现同级元素区别对待

By | 2009/07/31

      对一个没有确定数目的element,   如果有的元素跟其它的不一样,处理起来很麻烦.  比如一个网站的导航菜单,我们希望在第每个菜单项的中间加个  | 来分隔, 这样的情形如果每项都用相同的style, 最后的一个也会出现一个分隔, 显然这不是我们所想要的. 所以你必须到程序中设置输出最后一项时,使用不同的Class.  这样程序和页面两个方面都要更改.

     其实如果我们用Jquery的强大元素选择能力,完全可以不用去修改程序,只要在页面和加上几行JS代码就可以实现.

 前提是页面载入了jquery, 加入以下代码:

$(document).ready(function() {
	$("#menu li:last").addClass("noseptation");
});

     其中的$("#menu li:last")就是选择了id为menu的区块最后一个<li> ,后面就是加上一个class,这个class设置没有分隔符就行了. 我们可以看出,

     这种方法很简单, 还可以选择first,second,third…last,都可以加上不同的class. 确实很方便.

 

2 thoughts on “Jquery实现同级元素区别对待

  1. fleagao

    这样为加一个特殊的li而加载jquery有小题大做吧

    1. dengor Post author

      是的,上面已经说过“前提是页面载入了jquery”,我想这种情况应该很普遍,毕竟“jquery”的强大和易用性,是很多网站提高用户体验的一个不二选择。 这不过是探讨一种实现方法,这只是能实现的方法之一。

Comments are closed.