jQuery中parents()的使用说明

举个例子：


代码如下:

<body>
<div id="one">
<div id="two">hello</div>
<div id="three">
<p>
<a href="#">tonsh</a>
</p>
</div>
</div>

$("a").parent()将会得到父对象<p>
$("a").parents()得到父对象为<p><div.3><div.1>
$("a").parents().filter("div")将得到<div.3><div.1>,还可以写成$("a").parents("div")。
如果想的到<div.2>对象可以写成这样：$("a").parents("div:eq(0)")。
如果点击<a>链接时弹出<div.2>中的内容该怎么办？


代码如下:

var id=$("a").parents("div:eq(1)").children("div:eq(0)").html();
alert(id);

这种类似下标的用法很容易就得到了我们想要的内容，只要没有搞混这些下标的顺序。
jquery parents使用举例

p, div, span {margin:2px; padding:1px; }
div { border:2px white solid; }
span { cursor:pointer; font-size:12px; }
.selected { color:blue; }
b { color:red; display:block; font-size:14px; }

Hello

Hello Again

And Hello Again

点击Hellos来切换父元素
素材下载
站长工具
服务器软件
百度
我们

function showParents() {
$("div").css("border-color", "white");
var len = $("span.selected")
.parents("div")
.css("border", "2px red solid")
.length;
$("b").text("Unique div parents: " + len);
}
$("span").click(function () {
$(this).toggleClass("selected");
showParents();
});

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的API中,有parents(). parent().closest()这几个,一直不太清楚它们具体的区别,所以狠下心好好读了一下jQuery的API文档,并把区别记在这里,以供参考.  1.parents([selector]) 本方法用于选择给定jQuery对象中包含的DOM元素或者DOM元素集的祖先节点,并将这些节点包装成jQuery对象返回,返回的节点集是以从里到外的顺序排序的. 同时,本方

  • jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

    jquery遍历之parent()和parents()的区别及parentsUntil()方法详解

    .parent(selector) 获得当前匹配元素集合中每个元素的父元素,由选择器筛选(可选). .parents(selector) 获得当前匹配元素集合中每个元素的祖先元素,由选择器筛选(可选). 如果给定一个表示 DOM 元素集合的 jQuery 对象,.parents() 方法允许我们在 DOM 树中搜索这些元素的祖先元素,并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象.元素是按照从最近的父元素向外的顺序被返回的..parents() 和 .parent()

  • jquery中的查找parents与closest方法之间的区别

    一.返回值 前者可以返回多个元素 或者只能返回0个或者1个 二.停止的时间不同 前者是所有的上级元素即一直到根一般是body  后者是知道发现为止,发现一个就停止了 三.开始的元素不同 前者是从父元素开始  后者是从自身开始的 代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-tra

  • jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

    jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析

    closest() 方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上. 语法: .closest(selector) 参数selector为字符串值,包含匹配元素的选择器表达式. 如果给定表示 DOM 元素集合的 jQuery 对象,.closest() 方法允许我们检索 DOM 树中的这些元素以及它们的祖先元素,并用匹配元素构造新的 jQuery 对象..parents() 和 .closest() 方法类似,它们都沿 DOM 树向上遍历.两者之间的差异尽管微妙,却很重要:

  • JQuery.closest(),parent(),parents()寻找父结点

    JQuery.closest(),parent(),parents()寻找父结点

    HTML代码,测试地址:jQuery 遍历 - closest() 方法 ------我粘代码上来,在页面上会自动隐藏(会显示一下)!谁能教我这是肿么回事! 1.通过item-1查找 level-3(查找直接上级) 复制代码 代码如下: $('li.item-1').closest('ul') $('li.item-1').parent() $('li.item-1').parents().eq(0) 2.通过item-1查找 level-2(通过选择器查找父元素) 复制代码 代码如下: $('

  • jquery parent和parents的区别分析

    可以看出parent的取值很明确,就是当前元素的父元素:parents则是当前元素的祖先元素.下面列出例子说明: 复制代码 代码如下: <div id='div1'><div id='div2'><p></p></div><div id='div3' class='a'><p></p></div><div id='div4'><p></p></div>

  • jQuery中parents()的使用说明

    举个例子: 复制代码 代码如下: <body> <div id="one"> <div id="two">hello</div> <div id="three"> <p> <a href="#">tonsh</a> </p> </div> </div> $("a").paren

  • jQuery中parents()和parent()的区别分析

    本文实例分析了jQuery中parents()和parent()的区别,分享给大家供大家参考.具体分析如下: 其实在jQuery中,函数或者选择器的概念都是很容易理解的,只要对API手册有足够的熟练就能够很容易分辨,标题中的函数其实也是如此,不过咱们这里还是做一些简单的介绍,毕竟这样可能更为方便一些. 一.parents()函数: 此函数能够获取匹配元素的所有父元素,代码示例: 复制代码 代码如下: $(".mayi").parents().css("color",

  • jQuery中parents()方法用法实例

    本文实例讲述了jQuery中parents()方法用法.分享给大家供大家参考.具体分析如下: 此方法取得一个包含着所有匹配元素的父辈元素的元素集合. 所取得的父辈元素集合也可以使用表达式进行筛选. 语法结构: 复制代码 代码如下: $(selector).parents(expr) 参数列表: 参数 描述 expr 可选.用于筛选父辈元素的表达式. 实例代码: 实例一: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta

  • jquery中this的使用说明

    jquery中this的使用说明

    原来js中的this这么好用 复制代码 代码如下: $(document).ready(function(){ var DragElement=null; $("#zz").mousedown(function(){ DragElement=this;//这时this指的就是$("#zz")对象 $(document).mousemove(function(){ 如果直接$(this).css("left")//由于是在mousemove内,这样

  • JQuery中的$.getJSON 使用说明

    原型如下: jQuery.getJSON( url, [data], [callback] ) 跨域加载JSON数据. url: 发送请求的地址 data : (可选) 待发送key/value参数 callback: (可选) 载入成功时的回调函数 主要用于客户端获取服务器JSON数据.简单示例: 服务器脚本,返回JSON数据: $.getJSON.php $arr=array("name"=>"zhangsan", "age"=>

  • jQuery中closest和parents的区别分析

    jQuery中closest和parents从表现上来看都是说查找上线元素的一些内容了,但如果说仔细可能各位不懂,下面我们一起来看看closest和parents区别. 1.父级 parent()--唯一父级元素,可能是0个或1个元素. 2.祖先 parents(selected)--所有selected祖先(不包含根元素),可能是0个.1个或多个元素. closest(selected)--唯一selected祖先,可能是0个或1个元素. closest和parents的主要区别是: 前者从当

  • jQuery中clone()函数实现表单中增加和减少输入项

    jQuery中clone()函数实现表单中增加和减少输入项

    之前一直没有深入了解到clone()函数的方法,所以对应表单中增加和减少输入项一直使用如: var copy_html=$(选择器).html(); alert(copy_html); 问题在于得出的copy_html直接是HTML内容代码,未经过object封装,而使用: var copy_html=$(选择器).clone(); alert(copy_html); 得出未object对象类型,若$(选择器)包含了某个触发,如 onclick,如果想copy_html继续沿用onclick方法

  • 详解jQuery中的DOM操作

    详解jQuery中的DOM操作

    大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. jQuery中的DOM操作 看看DOM操作都有哪些 逐一来看 先写一份HTML代码,后面的代码将操作这份HTML代码 <p title="选择你最喜欢的水果">你最喜欢的水果?</p> <ul> <li title="苹果">苹果</li> <li title=

  • jQuery中ztree 点击文本框弹出下拉框的实例代码

    废话不多说了,具体代码如下所示: <link rel="stylesheet" href="${ctx}/res/js/ztree/css/demo.css" type="text/css"/> <link rel="stylesheet" href="${ctx}/res/js/ztree/css/zTreeStyle/zTreeStyle.css" type="text/cs

  • jQuery中$.each使用详解

    通过它,你可以遍历对象.数组的属性值并进行处理. 使用说明 each函数根据参数的类型实现的效果不完全一致: 1.遍历对象(有附加参数) $.each(Object, function(p1, p2) { this; //这里的this指向每次遍历中Object的当前属性值 p1; p2; //访问附加参数 }, ['参数1', '参数2']); 2.遍历数组(有附件参数) $.each(Array, function(p1, p2){ this; //这里的this指向每次遍历中Array的当

随机推荐