jquery节点操作:jquery获取父节点、子节点与兄弟节点

发布时间:2020-11-26编辑:脚本学堂
有关jquery节点操作的一些例子,jquery获取父节点、子节点与兄弟节点的方法,在jquery中使用parent(),parents(),closest(),find,first-child等方法来查找父节点、子节点、兄弟节点。

jquery获取父元素的多个方法

一、用parent()来获取父节点
 

复制代码 代码示例:
$('#cur').parent().parent();

$('#cur').parent().parent('.pp');

$('#cur').parent('.pp');

closest和parents的主要区别:
前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找。
前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤。
前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。

二、jquery 兄弟节点的获取
 

复制代码 代码示例:
<ul>
<li>
<h3 class="title">类目一</h3>
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
</li>
<li>
<h3 class="title">类目二</h3>
<ul>
<li>第一项</li>
<li>第二项</li>
</ul>
</li></ul>
 

比如要点击类目一所在的 h3,对其兄弟节点的 ul 添加一个叫做 "show" 的 class。

代码:
 

复制代码 代码示例:
$(".title").click(function () { $(this).parent().find('ul').addClass('show'); });


就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul。

还有一种方法是使用 siblings() 函数。

代码:
 

(".title").click(function() { $(this).siblings('ul').addClass('show'); })

获取子节点,代码:
 

$("#tbody1:first-child")
:first-child

匹配第一个子元素:
':first' 只匹配一个元素,而此选择符将为每个父元素匹配一个子元素