遍历祖先同胞后代

Posted 2020-10-10 前端小小小小小小小白

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对象中；否则，它被排除在外。