jQuery获取父元素节点和子元素节点以及兄弟元素节点例子
2014-11-01 16:07:07  By: dwtedx

我先把要讲解的html代码贴出来、整个取节点(父、子、兄弟等)的方法都是围绕这段代码来的哈

<ul class="par">
	<li id="firstli">
		<h3 class="title">条目一</h3>
		<ul class="par">
			<li id="dwtedx">第一项</li>
			<li>第二项</li>
		</ul>
	</li>
</ul>


jQuery 父节点的获取

jquery获取父元素方法比较多、比如parent()、parents()、closest()、find,first-child这些都能帮你实现查找父节点、子节点、兄弟节点

如我们利用parent()来获取父节点

$("#dwtedx").parent().parent();//取得id为firstli的li节点
$("#dwtedx").parent().parent(".par");//取得最上面的ul节点
$("#dwtedx").parent(".par");//取得向上第一层的ul节点
以上是通过parent的方式来获取父节点的、大家可以根据自己项目需要来选择方法哈


下面、我们主要来讲一下 parents() 和 closest() 两个方法的区别

1、closest从当前元素开始匹配寻找、parents从父元素开始匹配寻找

2、closest逐级向上查找、直到发现匹配的元素后 就停止了、parents一直向上查找直到根元素、然后把这些元素放进一个临时集合中、再用给定的选择器表达式去过滤

3、closest返回0或1个元素、parents可能包含0 个、1个、或者多个元素

代码可以这样写

$(´#dwtedx´).parents(´.par´);//可以找出所有class为.par的节点
$(´#dwtedx´).closest(´.par´); //可以找出一个父节点、就是上面一层的那个


jQuery 兄弟节点的获取

jQuery兄弟节点获取、我们的思路是通过当前节点找到父节点、然后通过父节点去找到子节点、代码如下

$(”.title“).parent().find(´ul´);//找到自己的兄弟节点ul
就是通过先找到 h3 与 ul 共同的父节点 li 然后来用 find() 找到 ul


还有一种方法是使用 siblings() 函数、代码如下

 $(".title").siblings(´ul´);//找到自己的兄弟节点ul


jQuery 子节点的获取

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

$(".par:first-child");//取得id为firstli的节点

通过选择器去获取、代码如下

$(´#firstli h3.title´);//取得条目一的h3 

使用find()函数、上面已经说过了、用法一样

$(”#firstli“).find("h3");//找到子兄弟节点h3

使用children()函数、代码如下

$("#firstli").children("h3.title");取得子节点h3、class为title 


以上就是怎么通过jQuery去获取父节点、兄弟节点、子节点的方法、希望对大家有帮助

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+