jQuery遍历节点的常用技巧

发表时间: 2023-12-13 12:05

jQuery对象可以用for循环进行遍历：

HTML代码：

<h2><a href="#">正文</a>内容</h2><h2>正文<a href="#">内容</a></h2>

jQuery代码：

window.onload = function(){var oElements = $("h2 a"); //选择匹配元素for(var i=0;i<oElements.length;i++)    oElements[i].innerHTML = i.toString(); //oElements[i]转换为DOM对象}

jQuery对象使用each(callback)方法进行遍历

HTML代码：

<img /><img />

jQuery 代码:

$("img").each(function(i){    this.src = "test" + i + ".jpg";});

$("li").each(function(index, ele){    //console.log(index,ele)    //$(ele).css("font-size",index*10+"px") //ele指DOM对象    $(this).css("font-size",index*10+"px") //this指DOM对象    //$(this)等价于$(ele)})

HTML代码

<ul><li>aaa</li><li>bbb</li><li>ccc</li><li>ddd</li><li>eee</li></ul>

取得匹配元素的所有子元素组成的集合: children(). 该方法只考虑子元素而不考虑任何后代元素.

取得匹配元素后面紧邻的同辈元素的集合:next();

取得匹配元素前面紧邻的同辈元素的集合:prev()

取得匹配元素前后所有的同辈元素: siblings()

取得一个包含着所有匹配元素的唯一父元素的元素集合：parent()

children([expr]) 返回值:jQuery

查找DIV中的每个子元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").children()

结果:

[ Hello Again ]

在每个div中查找 .selected 的类。

HTML 代码:

<div><span>Hello</span><p class="selected">Hello Again</p><p>And Again</p></div>

jQuery 代码:

$("div").children(".selected")

结果:

[ Hello Again ]

next([expr]) 返回值:jQuery

找到每个段落的后面紧邻的同辈元素。

HTML 代码:

<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next()

结果:

[ Hello Again, <div>And Again</div> ]

找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

HTML 代码:

<p>Hello</p><p class="selected">Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

$("p").next(".selected")

结果:

[ Hello Again ]

prev([expr]) 返回值:jQuery

找到每个段落紧邻的前一个同辈元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("p").prev()

结果:

[ <div>Hello Again</div> ]

找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

HTML 代码:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:

$("p").prev(".selected")

结果:

[ Hello Again ]

siblings([expr]) 返回值:jQuery

找到每个div的所有同辈元素。

HTML 代码:

<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

$("div").siblings()

结果:

[ Hello, And Again ]

找到每个div的所有同辈元素中带有类名为selected的元素。

HTML 代码:

<div><span>Hello</span></div><p class="selected">Hello Again</p><p>And Again</p>

jQuery 代码:

$("div").siblings(".selected")

结果:

[ Hello Again ]

parent([expr]) 返回值:jQuery

查找每个段落的父元素和祖先元素

HTML 代码:

<body><div><p>Hello</p><p>Hello</p></div></body>

jQuery 代码:

$("p").parent()$("p").parent().parent() //可以连续使用, 查找到body元素

parents([expr]) 返回值:jQuery

找到每个span元素的所有祖先元素。

HTML 代码:

<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>jQuery

代码:

$("span").parents()$("span").parents("p")

正文内容

正文内容

jQuery遍历节点的常用技巧

热门阅读

推荐阅读