×

学习树形结构的jQuery选择器

作者:ceshi2017.09.26来源:Web前端之家浏览:9796评论:0
关键词:JQueryJS

DOM结构其实也是一种树形结构,jQuery提供的树形选择器可以用来选择DOM Tree里的节点。这些树形选择器的方法包括:children(), parent(), parents(), next(), prev(), siblings().
选择某个元素的"孩子" - children() 。

<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#parent").children().length //得到所有的”孩子“(li)的个数,“3” 
$("#parent").children("#son1").text(); //得到第一个”孩子“(li)的值 - “第一列”

选择某个元素的“父母” - parent()。

<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son1").parent().attr("id");//得到ul的ID - "parent"

选择某个元素的“祖先”-parents() (注意:一级一级向上选择直到<html>) 。

<div id="grand"> 
<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
</div> 
$("#son2").parents().each(function(i){ 
if(i<3) //只显示3代祖先 
alert($(this).html()); 
});

选择某个元素的“弟弟” - next()。

<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son2").next().text(); //选择#son3选择某个元素的“哥哥“
prev()
<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son2").prev().text(); //选择#son1选择某个元素的“兄弟”

siblings()

<ul id="parent"> 
<li id="son1">第一列</li> 
<li id="son2">第二列</li> 
<li id="son3">第三列</li> 
</ul> 
$("#son2").siblings().text(); //选择#son1和#son3

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1488297600523.html

网友评论文明上网理性发言 已有0人参与

发表评论: