jQuery 树形结构的选择器

2016-02-19 13:46 45 1 收藏

今天图老师小编给大家介绍下jQuery 树形结构的选择器,平时喜欢jQuery 树形结构的选择器的朋友赶紧收藏起来吧!记得点赞哦~

【 tulaoshi.com - Web开发 】

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

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
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()

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
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)

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
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(i3) //只显示3代祖先
alert($(this).html());
});

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

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
ul id="parent"
li id="son1"第一列/li
li id="son2"第二列/li
li id="son3"第三列/li
/ul
$("#son2").next().text(); //选择#son3选择某个元素的“哥哥”

prev()

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
ul id="parent"
li id="son1"第一列/li
li id="son2"第二列/li
li id="son3"第三列/li
/ul
$("#son2").prev().text(); //选择#son1选择某个元素的“兄弟”

siblings()

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
ul id="parent"
li id="son1"第一列/li
li id="son2"第二列/li
li id="son3"第三列/li
/ul
$("#son2").siblings().text(); //选择#son1和#son3

来源:https://www.tulaoshi.com/n/20160219/1605181.html

延伸阅读
标签: Web开发
1 基本选择器 $(#id) 根据给定的id匹配一个元素 $(.class) 根据给定的类名匹配元素 $(element) 根据给定的元素名匹配元素 $(*) 匹配所有元素 $(selector1,selector2,...,selectorN) 将每一个选择器匹配到的元素合并后一起返回 2 层次选择器 $("ancestor descendant") 选取ancestor元素里的所有descendant(后代)元素 $("parent...
标签: Web开发
一 基本选择器 $("input“) :选择所有是input标签的元素 $("#input1"):选择id为input1的元素 $(".acss"):选择所有包含acss 这个css类样式的 代码 代码如下: body a href=""link/a input id="input1" class="acss" input id="Text1" class="acss" input id="Text2" script var oo = $("input"); //oo是以上3个的集合 var pp =...
标签: Web开发
contains选择符 contains选择符是指对象中包括指定内容的对象本身,如:$('td:contains("abcd")').addClass('highlight');则是找到所有包含“abcd”这样内容的单元格,设置这些单元格的样式类型添加“highlight”类。 下面的代码,运行后,需要刷新下,以便加载jquery !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht...
标签: Web开发
有了Jquery的选择器,吃饭饭饭香,身体倍棒…… 1.基本 我们知道jquery最常用的就是选择器了,我们看一下jqueryAPI中的 选择器—基本中有5种情况 class ,id ,element, *,还有一个多选择器,这里我们想一下css样式的写法 css样式也有几种情况:1.类样式 2.id样式 3.标签样式, 如果有一个aa的类 ,那么我们定义aa的样式就要写成 .aa{} 如...
标签: Web开发
代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=utf-8" / title无标题文档/title script src="js/jquery-1.3.2.js" /script sc...

经验教程

576

收藏

57
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部