Jquery的parent和parents(找到某一特定的祖先元素)
关于Jquery的parent和parents
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>
</div>
$('p').parent()取到的是div2,div3,div4
$('p').parent('.a')取到的是div3
$('p').parent().parent()取到的是div1，这点比较奇特；不过Jquery对象本身的特点决定了这是可行的。
$('p').parents()取到的是div1,div2,div3,div4
$('p').parents('.a')取到的是div3
parent(exp)用法:取得一个包含着所有匹配元素的唯一父元素的元素集合。
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function(){
alert($(this).parent().next().html());
});
});
</script>
</head>
<body>
<table>
<tr>
<td><input id="btn1" class="btn" type="button" value="test"/></td>
<td>some text</td>
</tr>
</table>
....
其中：
this.parent()是input前面的td
this.parent().parent()获取的是tr
this.parent().parent().parent()获取的是table
this.parent().next()获取的是td相临的td
另例子中：
<div><p>Hello</p><p>Hello</p></div>
$("p").parent() 得到的是：<div><p>Hello</p><p>Hello</p></div>对象，因为p标签的父标签是div.
jquery的parents()使用
今天遇到一个有意思的问题，jquery有两个函数parent()和parents().通过这两个函数可以找到一个对象的父对象，又称作jquery的选择器。举个例子：
<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);
分享到：
相关推荐
parents则是当前元素的祖先元素。下面列出例子说明： 代码如下:’div1′>’div2′><p></p></div><div id=’div3′ class=’a’><p></p></div><div id=’div4′><p></p></div></div>$(‘p’).parent()取到的是div2,...
1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() 获取其所有的祖先元素 $("#id").closest() 获取其最近的祖先元素，依次上溯 ——————————————...获得匹配元素紧邻的前一个同胞元素
在JavaScript的jQuery库中，`closest()`, `parent()`, 和 `parents()` 是三个非常重要的方法，用于在DOM树中查找元素的父级。这些方法在网页开发中常常被用来定位和操作元素，特别是在处理复杂的DOM结构时。下面将...
- 后代元素指的是被当前元素所包含的所有子元素和孙元素。 接下来，我们将探讨如何使用JQuery遍历元素的父辈和祖先。 1. parent()方法 parent()方法用于获取当前选中元素的直接父辈元素。这是遍历父辈元素中最基础...
另一种方法是使用`parents()`，它返回一个包含所有祖先元素的集合，这些元素满足所传递的选择器条件。与`closest()`不同，`parents()`会返回所有符合条件的祖先元素，而不仅仅是第一个。因此，如果你需要收集多个...
在JavaScript中，获取指定ID的元素可以使用`getElementById()`方法，然后通过DOM操作来获取子元素、父元素和兄弟元素。例如，获取ID为"dom"的元素下的所有子`div`元素，可以使用`getElementsByTagName()`方法。但在...
与`parent()`函数不同的是，`parents()`会遍历所有祖先层级，返回一个包含所有父辈元素的jQuery对象。这就意味着无论父元素的层级有多深，`parents()`都会返回所有相关的祖先元素。显然，如果文档结构非常复杂，那么...
`parent()`选取直接父元素，`parents()`选取所有祖先元素，直到`<body>`，而`parentsUntil()`则在达到指定条件时停止选取。 `prev()`、`prevAll()`、`prevUntil()`分别用于选取前一个兄弟元素、所有前面的兄弟元素...
jQuery中还包含一系列其他的筛选方法，如`parent`、`parents`、`parentsUntil`、`next`、`prev`、`nextAll`、`prevAll`、`nextUntil`、`prevUntil`、`siblings`、`children`和`contents`等。这些方法都是基于当前...
特别是在处理DOM（Document Object Model）元素方面，jQuery提供了一系列简便的方法来选择、遍历和操作这些元素。本文将详细介绍jQuery中十个常用且非常实用的遍历函数，帮助开发者更高效地处理复杂的HTML结构。 ##...
本文实例讲述了jQuery遍历DOM元素与节点方法。分享给大家供大家参考，具体如下： 一、向上遍历–祖先元素 ① $(selector).parent([filter]):返回selector匹配元素的直接父元素，方法可以接受一个过滤selector来过滤...
总结来说，"JQ遍历祖先"是jQuery中的一种基本操作，它包括`.parents()`, `.parent()`, 和 `.closest()`等方法，用于获取和操作DOM元素的父级或祖先元素。了解并熟练运用这些方法，对于提升网页开发效率和编写复杂...
在jQuery库中，遍历DOM树是常见的操作，特别是对于元素的查找和操作。`parent()`、`parents()`和`parentsUntil()`这三个方法都用于在DOM层级上进行导航，但它们各自有不同的用法和特点。 1. `parent(selector)`： ...
本文将详细介绍如何使用jQuery与原生JavaScript来获取父元素、子元素、前一个元素和后一个元素，并通过具体的代码示例来进行比较。 #### 二、获取父元素 ##### 1. 使用jQuery获取父元素 在jQuery中，可以通过`....
1. **选择器**：jQuery 提供了丰富的选择器来定位DOM元素，如`first`、`last`用于选取第一个或最后一个元素，`first-child`和`last-child`选取父元素的第一个或最后一个子元素，`parent>child`选取直接子元素，`not...
例如，当一个事件在子元素上触发，我们可能想找到一个最近的具有特定类名的祖先元素来执行某些操作。在这种情况下，`closest()` 提供了一种高效的方式找到这个祖先。 总结一下 `closest()` 和 `parents()` 的主要...
- 当我们想从当前元素开始向上遍历，直到找到匹配某个选择器的第一个祖先元素，`closest()`方法是正确的选择。因为`closest()`方法只会返回一个元素，如果当前元素匹配选择器，那么它将返回当前元素本身。 在实际...
总结来说，jQuery的遍历祖先方法提供了一套强大的工具，使开发者能够方便地在DOM树中导航，无论是查找单个元素的直接父级，还是选取一系列祖先，或者是限制在特定范围内的祖先，都能游刃有余。这使得jQuery成为前端...