首页 > 技术文章 > 遍历祖先、同胞、后代

suntao12138 2017-10-12 18:52 原文

1.遍历祖先

祖先是父、祖父或曾祖父等等。

通过 jQuery,能够向上遍历 DOM 树,以查找元素的祖先。

向上遍历 DOM 树,这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:

parent()
parents()
parentsUntil()

.parent()方法允许我们能够在DOM树中搜索到这些元素的父级元素,从有序的向上匹配元素,并根据匹配的元素创建一个新的 jQuery 对象。

.parents().parent()方法是相似的,但后者只是进行了一个单级的DOM树查找

.parentsUntil() 方法会找遍所有这些元素的前辈元素,直到遇到了跟参数匹配的元素才会停止。返回的jQuery对象中包含了所有找到的前辈元素,除了与 .parentsUntil() 选择器匹配的那个元素。

2.遍历同胞

同胞就是拥有相同的父元素。

通过jQuery能够在DOM树中遍历元素的同胞元素。

其中nextAll、prevAll、nextUntil、prevUntil其实与遍历祖先的的查找处理是非常类似。

nextAll()获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。

nextUntil()获得每个元素之后所有的同辈元素,直到遇到匹配选择器的元素为止。

preAll()获得匹配元素集合中每个元素之前的所有同辈元素,由选择器进行筛选(可选)。

preUntil()获得每个元素之前所有的同辈元素,直到遇到匹配选择器的元素为止。

next()获得匹配元素集合中每个元素紧邻的同辈元素。

prev()获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。

siblings()获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。

3.遍历后代

后代是子、孙、曾孙等等,通过 jQuery,能够向下遍历 DOM 树,以查找元素的后代。

下面是两个用于向下遍历 DOM 树的 jQuery 方法:

children()
find()

jQuery children() 方法

获得匹配元素集合中每个元素的子元素,选择器选择性筛选。

因为就jQuery可以是一个DOM的合集对象,所以children就需要遍历每一个合集中的直接子元素了,并且最后需要构建一个新的jQuery对象。

jQuery find() 方法

1、.find()方法返回被选元素的后代元素,一路向下直到最后一个后代。

2、.find()方法允许我们能够通过查找DOM树中的这些元素的后代元素,匹配的元素将构造一个新的jQuery对象。

3、.find().children()方法是相似的,但后者只是再DOM树中向下遍历一个层级。

4、.find()方法还可以接受一个选择器表达式,该选择器表达式可以是任何可传给$()函数的选择器表达式。如果紧随兄弟匹配选择器,它将被保留在新构建的jQuery对象中;否则,它被排除在外。

推荐阅读