jquery学习之-查找父元素方法parent() parents() closest()的区别

parent()、parents()与closest()方法两两之间有类似又有不同，本篇简短的区分一下这三个方法。通过本篇内容，大家将会在以后使用.parent()、parents()和closest()时不会显得无从下手。

我们直接看例子来来说明一下这三个方法的使用区别：

<ul id="menu" style="width:100px;">
    <li>
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
        </ul>
    </li>
    <li>End</li>
</ul>
接下来，分别看看这三个方法：

//点击Home时

$(

"#menu a"

).click(

function

() {

$(

this

).parent(

"ul"

).css(

"background"

"yellow"

);

//0

$(

this

).parent(

"li"

).parent(

"ul"

).css(

"background"

"yellow"

);

//1

$(

this

).parents(

"ul"

).css(

"background"

"yellow"

);

//2

$(

this

).closest(

"ul"

).css(

"background"

"yellow"

);

//3

return

false

});

1.parent()方法从指定类型的直接父节点开始查找，在"0"中，<a>的直接父节点是<li>所以在这里找不到<ul>父节点。在"2"中先找到了<li>，接着找到<ul>，并将它的背景色设置为yellow。parent()返回一个节点。

2.parents()方法查找方式同parent()方法类似，不同的一点在于，当它找到第一的父节点时并没有停止查找，而是继续查找，最后返回多个父节点，如在"2"中，使得id为menu的ul整个背景色变成了yellow。

3.closest()方法查找时从包含自身的节点找起，它同parents()很类似，不同点就在于它只返回一个节点如在"3"中，实现的功能同1相同。但它使得代码量减小，同"2"相比又只返回单一的一个节点。可见，closest()方法在项目中的使用频率是比较大的。

jquery学习之-查找父元素方法parent() parents() closest()的区别相关推荐

jQuery常用的查找Dom元素方法
jQuery常用的查找Dom元素方法废话不多说,先来个总结,然后下面是demo 一. 同级节点之间的检索(检索深度N=0) next()是在兄弟节点中,往后匹配; prev()是在兄弟节点中,往前匹 ...
jQuery 查找父元素
function deletesec1Div5(obj){ $(obj).closest(".sec1-div5").remove();} 自己写的一段代码,实现了table中的全 ...
jQuery学习（十）—替换方法
jQuery学习(十)-替换方法一. replaceAll方法作用:用jQuery对象替换掉所有的元素格式:元素1.replaceAll(元素2); 注意:元素2可以是jQuery对象或者选择器 ...
jQuery学习（七）— append方法与appendTo方法
jQuery学习(七)- append方法与appendTo方法一.append方法二.appendTo方法
html添加删除元素属性,jQuery学习笔记——.attr()和.removeAttr()方法操作元素属性
今天主要和大家一起分享一下如何使用jQuery的jQuery就可以让我们轻松的读取,添加,更改或删除一个(或多个)元素中的任何属性,在jQuery中我们可以使用下面的方法来实现:.attr():jQu ...
jQuery学习3：操作元素属性和特性
特性属性:是指DOM元素中能够和HTML元素中某个特性对应得上的属性. 下面就列出jQuery中提供的方法: 操作元素属性:each(iterator)遍历包装集里所有元素,为各元素分别调用传递进来的 ...
jQuery学习笔记--JqGrid相关操作方法列表备忘重点讲解(超重要)
JqGrid相关操作备忘方法列表特别推荐:怎样获取某一方某一列的值: [html] view plaincopy var rowdata=jQuery("#list").jqG ...
jQuery学习笔记--JqGrid相关操作方法列表备忘重点讲解(超重要) from:jpr1990
JqGrid相关操作备忘方法列表 1.获得当前列表行数:$("#gridid").getGridParam("reccount"); 2.获取选中行数据(js ...
jQuery学习笔记06-attr及removeAttr方法的使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

jquery学习之-查找父元素方法parent() parents() closest()的区别

jquery学习之-查找父元素方法parent() parents() closest()的区别相关推荐

最新文章

热门文章