jQuery 遍历

一 、 什么是遍历

jQuery 遍历，意为“查找”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。

以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。

下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家

族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍

历

---

二 、 遍历的方法

         2-1 向上遍历 dom 树  

parent() :返回被选元素的 直接父元素 。

parents() : 返回被选元素的 所有祖先元素 ，它一路向上直到文档的根元素 () 。

parentsUntil() : 返回 介于两个给定元素之间的所有祖先元素 。

        2-2 向下遍历 dom 树

children() : 返回被选元素的所有 直接子元素 。

find(): 返回被选元素的 所有的后代元素 ， 一路向下 直到最后一个后代。

        2-3 水平遍历 dom 树

siblings () :返回被选元素的所有同胞元素。

next ( ): 返回被选元素的下一个同胞元素。

nextAll ( ): 返回被选元素的所有跟随的同胞元素。

nextUntil ( ): 返回介于两个给定参数之间的所有跟随的同胞元素。

prev ( ) : 返回被选元素的上一个同胞元素

prevAll ( ) : 返回被选元素前面所有的同胞元素。

prevUntil( ): 返回被选元素之前介于两个给定参数之间所有的同胞元素。

向上遍历

                

• parent向上寻找祖先元素

        

• parents寻找所有的祖先元素

 

• parentsUntil寻初始标签到指定标签之间的祖先元素

向下遍历

• children向下寻找祖先元素

过滤

        

备注:此过滤为对象的方法，不同于选择器

通用语法:

$(selector).first()、$(selector).last()、$(selector).eq()、

$(selector).fiter()、$(selector).not()、$(selector).is()

first ():返回被选元素的首个元素。

last ():返回被选元素的最后一个元素。

eq( ): 返回被选元素中带有指定索引号的元素。

filter( ):规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素被返回。

例如: $("li").filter(":not(:contains('暗香'))").removeClass()

not( ): 返回不匹配标准的所有元素

is( ): 根据选择器检查当前匹配元素集合，如果存在至少一个匹配元素，则返回 true。

$("selector").has("sub_selector").length

用来检测某个子元素是否存在 存在为 1 否则为 0

Example:

console.log( $("li").eq(1).has("span").length)

水平遍历

• siblings ():返回被选元素的所有同胞元素。
• next ( ):返回被选元素的下一个同胞元素。

• nextAll( ): 返回被选元素的所有跟随的同胞元素。

  nextUntil( ): 返回介于两个给定参数之间的所有跟随的同胞元素。

  prev( ) : 返回被选元素的上一个同胞元素

  prevAll( ) : 返回被选元素前面所有的同胞元素。

  prevUntil( ):返回被选元素之前介于两个给定参数之间所有的同胞元素。

each遍历 重点

        

each()方法能使DOM循环结构简洁，不容易出错。each()函数封装了十分强大的遍历功能，使用也很方便，它可以遍历一维数组、多维数组、DOM, JSON 等等

在javaScript开发过程中使用$each可以大大的减轻我们的工作量。

each处理一维数组

alert(i)将输出0，1，2

alert(val)将输出aaa，bbb，ccc

 each处理二维数组

arr2为一个二维数组，item相当于取这二维数组中的每一个数组。

item[0]相对于取每一个一维数组里的第一个值   

alert(i)将输出为0，1，2，因为这二维数组含有3个数组元素

alert(item)将输出为  ['a', 'aa', 'aaa']，['b', 'bb', 'bbb']，['c', 'cc', 'ccc']

对此二位数组的处理稍作变更之后

alert(j)将输出为0，1，2，0，1，2，0，1，2

 alert(val)将输出为a，aa，aaa，b，bb，bbb，c，cc，ccc

each处理json数据，这个each就有更厉害了，能循环每一个属性 

    

这里alert(key)将输出one two three

alert(val)将输出one，1，two，2，three,3

这边为何key不是数字而是属性呢，因为json格式内是一组无序的属性-值，既然无序，又何来数字呢。

而这个val等同于obj[key]

ecah处理dom元素，此处以一个input表单元素作为例子。

        如果你dom中有一段这样的代码然后你使用each如下

那么，alert(val)将输出[object HTMLInputElement]，因为它是一个表单元素。   

alert(i)将输出为0，1，2，3 

alert(val.name);将输出aaa,bbb,ccc,ddd，如果使用this.name将输出同样的结果

alert(val.value);  将输出111,222,333,444，如果使用this.value将输出同样的结果

---

如果将以上面一段js代码改变成如下的形式  \

 可以看到，输出的结果是一样的，至于两种写法究竟区别在哪，我也还不知。此改变运用到上面几段数组的操作也会输出同样的结果。

遍历的三种办法

       选择器
选择器+遍历

 选择器+遍历

 更适用的遍历方法

1）先获取某个集合对象

2）遍历集合对象的每一个元素