JQuery的遍历

1.JQuery的遍历

1.什么叫遍历

遍历即为“移动”，具体的意思是从某一位置开始，到达另一个位置

2.遍历——祖先

1.祖先是父，祖父这些。通过DOM，你可以向上遍历。

2.向上遍历的方法：

  1. parent（）
  2. parents（）
  3. parentUntil（）

3.parent（）实例

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(function(){
 9     $(".b1").click(function(){
10         $("p").parent().css({"border":"solid 2px red"});
11     });
12
13 });
14 </script>
15
16 <style type="text/css">
17 .parent *{
18     display: block;
19     border: solid 1px lightgrey;
20     padding: 5px;
21     margin:10px;
22
23 }
24 </style>
25
26 </head>
27 <body>
28 <div class="parent">曾祖父元素
29 <ul>祖父元素
30     <li>父元素
31         <p>本元素
32             <span>
33                 子元素
34             </span>
35         </p>
36     </li>
37 </ul>
38  </div>
39
40 <button class="b1" >点击之后，显示parent（）父元素遍历</button>
41
42 </body>
43 </html>

4.parents（）实例     parents（）方法遍历所有的父元素指导根元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(function(){
 9     $(".b1").click(function(){
10         $("p").parents().css({"border":"solid 2px red"});
11     });
12
13 });
14 </script>
15
16 <style type="text/css">
17 .parent *{
18     display: block;
19     border: solid 1px lightgrey;
20     padding: 5px;
21     margin:10px;
22
23 }
24 </style>
25
26 </head>
27 <body>
28 <div class="parent">曾祖父元素
29 <ul>祖父元素
30     <li>父元素
31         <p>本元素
32             <span>
33                 子元素
34             </span>
35         </p>
36     </li>
37 </ul>
38  </div>
39
40 <button class="b1" >点击之后，显示parents（）父元素遍历</button>
41
42 </body>
43 </html>

parents（）里面可以设置参数,例如parents（“ul”），意思就是遍历所有父元素，且父元素是ul的。

5.parentsUntil（）返回两者之间的父元素，但不包含这两个元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(function(){
 9     $(".b1").click(function(){
10         $("p").parentsUntil("div").css({"border":"solid 2px red"});           //介于两者之间，但是不包括选定的两个元素
11     });
12
13 });
14 </script>
15
16 <style type="text/css">
17 .parent *{
18     display: block;
19     border: solid 1px lightgrey;
20     padding: 5px;
21     margin:10px;
22
23 }
24 </style>
25
26 </head>
27 <body>
28 <div class="parent">曾祖父元素
29 <ul>祖父元素
30     <li>父元素
31         <p>本元素
32             <span>
33                 子元素
34             </span>
35         </p>
36     </li>
37 </ul>
38  </div>
39
40 <button class="b1" >点击之后，显示parentsUntil（）父元素遍历</button>
41
42 </body>
43 </html>

3.遍历后代

1.遍历后代就是子，孙，曾孙

2.遍历后代的方法

  1. children（）
  2. find（）

3.children（）返回直接的子元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 6 </script>
 7 <script>
 8 $(function(){
 9     $(".b1").click(function(){
10         $("p").children().css({"border":"solid 2px red"});
11     });
12
13 });
14 </script>
15
16 <style type="text/css">
17 .parent *{
18     display: block;
19     border: solid 1px lightgrey;
20     padding: 5px;
21     margin:10px;
22
23 }
24 </style>
25
26 </head>
27 <body>
28 <div class="parent">曾祖父元素
29 <ul>祖父元素
30     <li>父元素
31         <p>本元素
32             <span>
33                 子元素
34             </span>
35         </p>
36     </li>
37 </ul>
38  </div>
39
40 <button class="b1" >点击之后，显示children（）子元素遍历</button>
41
42 </body>
43 </html>

选择性遍历后代

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .descendants *
 7 {
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19   $("div").children("p.1").css({"color":"red","border":"2px solid red"});
20 });
21 </script>
22 </head>
23 <body>
24
25 <div class="descendants" style="width:500px;">div (当前元素)
26   <p class="1">p (儿子元素)
27     <span>span (孙子元素)</span>
28   </p>
29   <p class="2">p (儿子元素)
30     <span>span (孙子元素)</span>
31   </p>
32 </div>
33
34 </body>
35 </html>

4.find（）方法，也是带有参数的可选择遍历后代。

find（“spn”）是指，从遍历本元素的子元素中为span的。

find（“*”）是指，遍历本元素的所有子元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("div").find("*").css({"color":"red","border":"2px solid red"});        //find()方法是有参数的
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素)
  <p class="1">p (儿子元素)
    <span>span (孙子元素)</span>
  </p>
  <p class="2">p (儿子元素)
    <span>span (孙子元素)</span>
  </p>
</div>

</body>
</html>

4.遍历同胞

遍历同胞的方法

  1. siblings（）
  2. next（）
  3. nextUntil（）
  4. nextAll（）
  5. prev（）
  6. prevAll（）
  7. prevUntil（）

1.siblings（）返回所有的同胞

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{
    display: block;
    border: 2px solid lightgrey;
    color: lightgrey;
    padding: 5px;
    margin: 15px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").siblings().css({"color":"red","border":"2px solid red"});        //siblings()方法是返回所有的同胞
});
</script>
</head>
<body>

<div class="descendants" style="width:500px;">div (当前元素)
  <p >p (儿子元素)
    <span>span (孙子元素)</span>
  </p>
  <p >p (儿子元素)
    <span>span (孙子元素)</span>
  </p>
</div>

</body>
</html>

siblings（）含有参数

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .descendants *                                        //这种选择器是指类.descendants之后所有的元素执行这样的css样式
 7 {
 8     display: block;
 9     border: 2px solid lightgrey;
10     color: lightgrey;
11     padding: 5px;
12     margin: 15px;
13 }
14 </style>
15 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
16 </script>
17 <script>
18 $(document).ready(function(){
19   $("p").siblings("ul").css({"color":"red","border":"2px solid red"});        //siblings()方法可以有参数，添加参数是指选择子元素中符合参数的元素
20 });
21 </script>
22 </head>
23 <body>
24
25 <div class="descendants" style="width:500px;">div (当前元素)
26   <p >p (儿子元素)
27     <span>span (孙子元素)</span>
28   </p>
29   <p >p (儿子元素)
30     <span>span (孙子元素)</span>
31   </p>
32   <ul>ul(儿子元素)</ul>
33 </div>
34
35 </body>
36 </html>

2.next（）返回一个元素，即是下一个同胞元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 /* 这种选择器是指类.descendants之后所有的元素执行这样的css样式*/
 7 .descendants *
 8 {
 9     display: block;
10     border: 2px solid lightgrey;
11     color: lightgrey;
12     padding: 5px;
13     margin: 15px;
14 }
15 </style>
16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
17 </script>
18 <script>
19 $(document).ready(function(){
20   $("p.2").next().css({"color":"red","border":"2px solid red"});
21 });
22 </script>
23 </head>
24 <body>
25
26 <div class="descendants" style="width:500px;">div (当前元素)
27   <p class="1">p (儿子元素)
28     <span>span (孙子元素)</span>
29   </p>
30   <p class="2">p (儿子元素)
31     <span>span (孙子元素)</span>
32   </p>
33   <ul>ul(儿子元素)</ul>
34 </div>
35
36 </body>
37 </html>

nextAll(),nextUntil()和前面的祖先遍历类似，不过是换了方向，针对子类。

而prev（）的几个方法与next（）方法类似，不同的是，next（）系列方法是向后遍历，而prev（）系列方法是向前遍历。

5.JQuery遍历——过滤

过滤的方法：

  1. first（）
  2. last（）
  3. eq（）
  4. filter（）
  5. not（）

1.first（）返回被选元素的首个元素

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 /* 这种选择器是指类.descendants之后所有的元素执行这样的css样式*/
 7 .descendants *
 8 {
 9     display: block;
10     border: 2px solid lightgrey;
11     color: lightgrey;
12     padding: 5px;
13     margin: 15px;
14 }
15 </style>
16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
17 </script>
18 <script>
19 $(document).ready(function(){
20   $("div p").first().css({"color":"red","border":"2px solid red"});
21 });
22 </script>
23 </head>
24 <body>
25
26 <div class="descendants" style="width:500px;">div (当前元素)
27   <p >p (儿子元素)                                                       //该元素被选中
28     <span>span (孙子元素)</span>
29   </p>
30   <p>p (儿子元素)
31     <span>span (孙子元素)</span>
32   </p>
33   <p>ul(儿子元素)</p>
34 </div>
35
36 </body>
37 </html>

同理，last（）是被选中的最后一个元素

2.eq（）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 /* 这种选择器是指类.descendants之后所有的元素执行这样的css样式*/
 7 .descendants *
 8 {
 9     display: block;
10     border: 2px solid lightgrey;
11     color: lightgrey;
12     padding: 5px;
13     margin: 15px;
14 }
15 </style>
16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
17 </script>
18 <script>
19 $(document).ready(function(){
20   $("div p").eq(1).css({"color":"red","border":"2px solid red"});                                   //返回索引的元素，索引值从0开始
21 });
22 </script>
23 </head>
24 <body>
25
26 <div class="descendants" style="width:500px;">div (当前元素)
27   <p >p (儿子元素)
28     <span>span (孙子元素)</span>
29   </p>
30   <p>p (儿子元素)                                                           //该元素被选中
31     <span>span (孙子元素)</span>
32   </p>
33   <p>ul(儿子元素)</p>
34 </div>
35
36 </body>
37 </html>

3.filter（）

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 /* 这种选择器是指类.descendants之后所有的元素执行这样的css样式*/
 7 .descendants *
 8 {
 9     display: block;
10     border: 2px solid lightgrey;
11     color: lightgrey;
12     padding: 5px;
13     margin: 15px;
14 }
15 </style>
16 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
17 </script>
18 <script>
19 $(document).ready(function(){
20   $("*").filter(".1").css({"color":"red","border":"2px solid red"});                                   //返回选定的条件，没有选定的就不返回
21 });
22 </script>
23 </head>
24 <body>
25
26 <div class="descendants" style="width:500px;">div (当前元素)
27   <p >p (儿子元素)
28     <span class="1">span (孙子元素)</span>
29   </p>
30   <p>p (儿子元素)
31     <span>span (孙子元素)</span>
32   </p>
33   <p class="1">ul(儿子元素)</p>
34 </div>
35
36 </body>
37 </html>

同理，not（）方法是返回不符合的元素，与filter相反。

时间： 2024-08-10 21:41:17

JQuery的遍历的相关文章

Jquery节点遍历

jquery 节点遍历 <html> <head> <title></title> <script src="Jquery/jquery-1.10.2.min.js" type="text/javascript"></script> </head> <body> <div>AA</div> <div>BB</div> <

jquery:树遍历

.children() 获得元素集合中每个匹配元素的子元素,选择器选择性筛选. <!DOCTYPE html> <html> <head> <style> body { font-size:16px; font-weight:bolder; } p { margin:5px 0; } </style> <script src="http://code.jquery.com/jquery-latest.js"><

JQuery+javascript遍历tr td

function InitTable(tableID, trName) { $(tableID + " tr").each(function (index, element) { if (index == 0 || index == $(tableID + " tr").length - 1) { return true; } var s = element.cells[0].innerHTML; if ($.trim(s) != '') { if (s.index

jquery学习——遍历

1.each() $(selector).each(function(index,element)) var arr = [ "a", "bb", "ccc" ]; $.each(arr,function(i,a){ console.log(i+":"+a); }); //直接对jquery对象遍历 $(arr).each(function(i,a){ console.log(i+":"+a); }); 其

JQuery $.each遍历JSON字符串报Uncaught TypeError:Cannot use &#39;in&#39; operator to search for

查看一个简单的jQuery的例子来遍历一个JavaScript数组对象. [js] view plaincopy var json = [ {"id":"1","tagName":"apple"}, {"id":"2","tagName":"orange"}, {"id":"3","tagName&

jquery $.each遍历json数组方法

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head>  <meta http-equiv="content-

jquery json遍历和动态绑定事件

<div id='tmpselectorList' style='border: 1px solid grey;max-height: 150px;position:absolute;text-align: left; overflow: auto;background:white;width:153px;'> </div> <script type="text/javascript"> $(document).ready(function () {

jquery里遍历普通数组和多维数组的方法及实例

jquery里遍历数组用的是$.each,下面站长给大家几个具体的实例: 实例1.遍历一个普通的一维数组: 1 2 3 4 5 6 7 8 <script> //声明数据有下面两种方式 //var aijquery=new Array("a","b","c","d"); var aijquery=["a","b","c","d"]; $

jQuery使用（十一）：jQuery实例遍历与索引

each() children() index() 一.jQuery实例遍历方法each() jQuery实例上的each()方法规定要运行的函数,并且给函数传入两个参数:index,element.这个方法本身应用非常的简单,所以要来点不简单的东西,请看以下代码: <ul> <li></li> <li></li> <li></li> </ul> //js //需求一是将每个li的索引值作为文本添加给对应的li