第一百五十七章 追根溯源

找完了孩子,我们开始找祖先。

找孩子是 CSS 可以去做的事情,但是找祖先这个事儿,CSS 就做不了。

$('#miao').parent()

就是让孩子去叫家长的意思,但是这里 parent 没有加复数,那就是只找他的父元素,而不找祖先元素。

父元素的话有几个呢?对于每一个元素,它最多只有一个父元素。但是用这个方法获得到的结果仍然可能是一个合集。因为我们在前面所选中的元素,如果是一个合集,那么它们可能具有不同的父元素。就是说每一个孩子只有一个父亲,但是如果是开家长会呢?就是把班里每一个孩子的父亲都叫过来,结果获得了一大群父亲……

$('a').parent()

就像这个样子,虽然每一个链接只有一个父元素,但是页面中所有的链接,它们的父元素可能并不是同一个,所以最后得到的结果依旧是一个合集。

所以在某些情况下我们需要对这个合集进行一定的过滤,就像在家长会的时候,老师说:“家长中身高超过 1 米 8 的过来一下。”我们也可以通过在后面小括号中,指定选择器来筛选这些父元素。

$('a').parent('div')

理解了上面的叫家长,我们再把问题升级一下,来叫一下祖先:

$('#miao').parents()

注意哦,这次加了复数,那就意味着,我们要查找这个元素的所有祖先元素,父亲是祖先,爷爷也是祖先,……一直向上找到,没有祖先为止。这个方法十分凶残,所以,最好还是在后面的小括号中加上选择器进行过滤:

$('#miao').parents('.box')

如果,前面是一个合集,那么就对何其中的每一个元素,进行查找祖先的操作。

这是查找列祖列宗,追根溯源。但一般来说,我们没有必要这么大范围的进行查找,因为这个范围真的是太大了的。可能我们只是想向上查找几代,比如到太爷爷辈为止。

所以我们又有了一个新的方法:

$('#miao').parentsUntil()

就是查找这个元素的父辈元素,直到……对,就是可以限制一下查找范围了。但是像上面这样,在后面没有给出条件来限制这个查找范围,那么结果还是把列祖列宗全翻出来,就和 parents 方法是一样的了。

首先非常简单直观的,我们可以给出一个选择器,作为限制的参数,比如:

$('#miao').parentsUntil('.box')

就是向上查找,直到符合这个选择器为止,但是要十分注意一点:并不包含符合选择器的那个元素

这里的限制条件我们也可以使用 jQuery 对象表示:

$('#miao').parentsUntil( $('.box') )

和上面的效果是一样的,下面这种方法依旧是作为了解,并不要求掌握使用。因为选择器的方法是通用的,但并不是每种方法都支持 jQuery 对象作为参数。

这是限定了查找的范围,然后我们还可以对这个范围中的元素进行一下筛选,也就是这个方法可以接收第 2 个参数,依旧是一个选择器。

$('#miao').parentsUntil('.box'. '.ji')

我们来把这个事情捋一遍,首先,我们找到了元素 $('#miao')(如果这里是一个元素的合集,则是对合集中的每一个元素进行如下操作),然后要在它的父辈元素中进行查找,但是做了一下限定,它父辈元素中的 .box 以及更向上的层级,都不被包含在其中。然后再看所获得的这些元素是否符合选择器 .ji,最终获得我们想要的结果。

最后还有一个关于父辈元素的方法,offsetParent。首先注意它不是复数,然后它不接受任何参数。

这个方法用来向上查找与当前元素最接近的定位元素。啥意思?向上查找就是先找父亲,再找爷爷,再找太爷爷……这样的一个顺序,找其中年龄最小的那个定位元素。那么什么是定位元素呢?就是这个元素,不是静态定位(postion: static,默认定位方法)。或者说这个元素是绝对定位(postion: absolute),相对定位(postion: relative),固定定位(postion: fixed)中的一种。

回想一下我们在 CSS 关于定位方法的内容,你会发现 offsetParent 可以让我们十分方便的找到可供当前元素进行定位的那个元素。这是非常有用的方法。

未经允许不得转载-易看设计:易看设计 - 创意.极致.传达 » 第一百五十七章 追根溯源

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏