首页 > JavaScript > jQuery parent(),next(),nextAll(),andSelf()
2009四月11

jQuery parent(),next(),nextAll(),andSelf()

总感觉jQ中这几个函数很有用处,也很有意思。呵。

parent([expr]):

取得一个包含着所有匹配元素的唯一父元素的元素集合。
你可以使用可选的表达式来筛选。

<div id="par_div"><a id="href_fir" href="#">href_fir</a>
<a id="href_sec" href="#">href_sec</a>
<a id="href_thr" href="#">href_thr</a></div>
<span id="par_span">
<a id="href_fiv" href="#">href_fiv</a>
</span>
$(document).ready(function(){
$("a").parent().addClass('a_par');
});

firebug查看jquery parent效果

这里其实就用到了我说过的隐式迭代哦。

next([expr]):

取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用nextAll)。可以用一个可选的表达式进行筛选。

更改一下API上面的例子吧,因为这个确实没啥好写的,呵呵。

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
<p>Demo</p>
var p_nex = $("p").next();
p_nex.addClass('p_next');

因为最后一个”<p>”标签后只有一个“<script>”标签了,没想到也被加上了’p_next’类名。结果如图

firebug,next

firebug,next

nextAll([expr]):

查找当前元素之后所有的同辈元素。
可以用表达式过滤

嗯,知道啥叫同辈元素吗?就是兄弟姐妹啊,这个属于绝对的近亲,是不可以XXOO的哈。
知道啥叫所有吗?就是全都算上啊,不管后面有啥了,反正是all
还是接着改上面的例子,

Hello

Hello Again
<div><span>And Again</span></div>
var p_nex = $("p").nextAll();
p_nex.addClass('p_next_all');

firebug_jq_nextall
注意看最后一个”<p&gt”标签哦,也被加上了’p_next_all’这个类名哦~~

andSelf():

加入先前所选的加入当前元素中
对于筛选或查找后的元素,要加入先前所选元素时将会很有用。

我感觉这个函数是最有意思的一个函数了,什么意思?直译过来就是”还有我“,”还有自己”,没错,还有自己。

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>
var p_nex = $("p").nextAll().andSelf();
p_nex.addClass('p_next_all');

注意看第一个“<p>”标签啊,这句话的意思是选择p标签后面的所有同级标签,以及自己。。。
firebug_jq_andself

嘿嘿,当然还有类似的一些函数,比如说prev(),prevAll()

只是和next(),nextAll()相反啦,自己写程序看看效果吧?

文章作者:simaopig
本文地址:http://www.xiaoxiaozi.com/2009/04/11/127/
版权所有 © 转载时必须以链接形式注明作者和原始出处!

本文目前尚无任何评论.

发表评论

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)