本文摘自PHP中文网,作者coldplay.xixi,侵删。
jquery遍历节点的方法:1、使用【children()】方法匹配元素的子元素集合;2、使用【next()】方法匹配元素后面紧邻的同辈元素;3、使用【prev()】方法匹配元素前面紧邻的同辈元素。
本教程操作环境:windows10系统、jquery2.2.4,本文适用于所有品牌的电脑。
推荐:《jquery视频教程》
jquery遍历节点的方法:
1、children()方法
该方法用于取得匹配元素的子元素集合。
使用children()方法来获取匹配元素的所有子元素的个数。
1 2 3 4 5 6 7 8 9 |
|
2、next()方法
该方法用于取得匹配元素后面紧邻的同辈元素。
var $p1=$("p").next;
//获取紧邻<p>元素后的同辈元素
得到的结果将是:
1 2 3 4 5 |
|
3、prev()方法
该方法用于取得匹配元素前面紧邻的同辈元素
从dom树的结构中可以知道<ul>元素的上一个同辈节点是<p>,因此可以通过prev()方法来获取<p>元素,代码如下:
var $ul=$("ul").prev();
//取得紧邻<ul>元素前的同辈元素
得到的结果将是:
<p title="选择你最喜欢的水果.">你最喜欢的水果是?</p>
4、siblings()方法
该方法用于取得匹配元素前后所有的同辈元素。
上面的代码中就用到了siblings()方法,当时是为了获取匹配元素的兄弟节点,即获取匹配元素的同辈元素。
以DOM树的结构为例。<ul>元素和<p>元素互为同辈元素,<ul>元素下的3个<li>元素也互为同辈元素。
如果要获取<p>元素的同辈元素,则可以使用如下代码:
var $p2=$("p").siblings();
//取得紧邻<p>元素的同辈元素
得到的结果是:
1 2 3 4 5 |
|
5、closest()
它用来取得最近的匹配元素。首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回一个空的Jquery对象。
比如,给点击的目标元素的最近的li元素添加颜色,可以使用如下代码:
1 2 3 |
|
相关免费学习推荐:JavaScript(视频)
以上就是jquery怎么遍历节点的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
更多相关阅读请进入《jQuery》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者