jQuery 树形结构的选择器

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

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

【 tulaoshi.com - Web开发】

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

代码如下：

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

代码如下：

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

代码如下：

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

代码如下：

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

代码如下：

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

代码如下：

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

上一篇： JavaScript中的特殊字符
下一篇：进了应用游戏之后为什么不能从左边切换了？

看过《jQuery 树形结构的选择器》的人还看了以下文章更多>>

锋利的jQuery 要点归纳（一） jQuery选择器

标签： Web开发

1 基本选择器 $(#id) 根据给定的id匹配一个元素 $(.class) 根据给定的类名匹配元素 $(element) 根据给定的元素名匹配元素 $(*) 匹配所有元素 $(selector1,selector2,...,selectorN) 将每一个选择器匹配到的元素合并后一起返回 2 层次选择器 $("ancestor descendant") 选取ancestor元素里的所有descendant（后代）元素 $("parent...

jQuery的强大选择器小结

标签： 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 =...

JQuery contains的选择器

标签： Web开发

contains选择符 contains选择符是指对象中包括指定内容的对象本身，如:$('td:contains("abcd")').addClass('highlight');则是找到所有包含“abcd”这样内容的单元格，设置这些单元格的样式类型添加“highlight”类。下面的代码，运行后，需要刷新下，以便加载jquery !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht...

跟着Jquery API学Jquery之一选择器

标签： Web开发

有了Jquery的选择器，吃饭饭饭香，身体倍棒…… 1.基本我们知道jquery最常用的就是选择器了，我们看一下jqueryAPI中的选择器—基本中有5种情况 class ,id ,element, *,还有一个多选择器，这里我们想一下css样式的写法 css样式也有几种情况：1.类样式 2.id样式 3.标签样式，如果有一个aa的类，那么我们定义aa的样式就要写成 .aa{} 如...

JQuery 学习笔记选择器之二

标签： 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...

查看更多精彩>>