jQuery遍历之parent()方法

Posted 廖利君

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery遍历之parent()方法相关的知识,希望对你有一定的参考价值。

jQuery遍历之parent()方法

jQuery是一个合集对象,如果想快速查找合集里面的每一个元素的父元素(这里可以理解为就是父亲-儿子的关系),此时可以用parent()方法

因为是父元素,这个方法只会向上查找一级

理解节点查找关系:

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

查找ul的父元素div, $(ul).parent(),就是这样简单的表达

parent()无参数

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

注意:jQuery是一个合集对象,所以通过parent是匹配合集中每一个元素的父元素

parent()方法选择性地接受同一型选择器表达式

同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

具体的操作,请参考右边的代码

 

jQuery遍历之parents()方法

jQuery是一个合集对象,如果想快速查找合集里面的每一个元素的所有祖辈元素,此时可以用parents()方法

其实也类似find与children的区别,parent只会查找一级,parents则会往上一直查到查找到祖先节点

理解节点查找关系:

<div class="div">
    <ul class="son">
        <li class="grandson">1</li>
    </ul>
</div>

在li节点上找到祖 辈元素div, 这里可以用$("li").parents()方法

parents()无参数

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

返回的元素秩序是从离他们最近的父级元素开始的

注意:jQuery是一个合集对象,所以通过parent是匹配合集中所有元素的祖辈元素

parents()方法选择性地接受同一型选择器表达式

同样的也是因为jQuery是合集对象,可能需要对这个合集对象进行一定的筛选,找出目标元素,所以允许传一个选择器的表达式

注意事项:

1 .parents()和.parent()方法是相似的,但后者只是进行了一个单级的DOM树查找
2  $( "html" ).parent()方法返回一个包含document的集合,而$( "html" ).parents()返回一个空集合。

具体的操作,请参考右边的代码

以上是关于jQuery遍历之parent()方法的主要内容,如果未能解决你的问题,请参考以下文章

整理Jquery的遍历方法

jQuery遍历-祖先

jQuery 遍历 – 祖先

jQuery 遍历 - 祖先:向上遍历 DOM 树,以查找元素的祖先

jQuery向父辈遍历的方法

jQuery向父辈遍历的方法