jquery获取父,同,子级元素
1、 parent([expr]):
获取指定元素的所有父级元素
<a id="href_sec" href="#">href_sec</a>
<a id="href_thr" href="#">href_thr</a></div>
<span id="par_span">
<a id="href_fiv" href="#">href_fiv</a>
</span>
$("a").parent().addClass('a_par');
});

二、获取同级元素:
1、next([expr]):
获取指定元素的下一个同级元素(注意是下一个同级元素哦)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script>
$('li.third-item').next().css('background-color', 'red');
</script>
</body>
</html>
这个例子的结果是,只有list item 4背景色变为红色
2、nextAll([expr]):
获取指定元素后边的所有同级元素
Hello Again
<div><span>And Again</span></div>
p_nex.addClass('p_next_all');

注意看最后一个”<p>”标签哦,也被加上了’p_next_all’这个类名哦~~
3、andSelf():
获取指定元素后边的所有同级元素,之后加上指定的元素
我感觉这个函数是最有意思的一个函数了,什么意思?直译过来就是”还有我“,”还有自己”,没错,还有自己。
p_nex.addClass('p_next_all');
注意看第一个“<p>”标签啊,这句话的意思是选择p标签后面的所有同级标签,以及自己。。。
以下这两个不举具体的例子了,实际上就是next()和nextAll()的相反喽
4、prev():获取指定元素的上一个同级元素(是上一个哦)。
5、prevAll():获取指定元素的前边所有的同级元素。
三、获取子元素
1、查找子元素方式1:>
例如:var aNods = $("ul > a");查找ul下的所有a标签
2、查找子元素方式2:children()
3、查找子元素方式3:find()
这里再简单介绍以下children()和find()的异同:
1> children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样。
2> children方法获得的仅仅是元素一下级的子元素,即:immediate children。
3> find方法获得所有下级元素,即:descendants of these elements in the DOM tree
4> children方法的参数selector 是可选的(optionally),用来过滤子元素,
但find方法的参数selector方法是必选的。
5> find方法事实上可以通过使用 jQuery( selector, context )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').
例:
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
使用:$('ul.level-2').children().css('border', '1px solid green'); 的效果是:

使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是: 
原文出自http://www.cnblogs.com/Tally/archive/2013/01/04/2844042.html
jquery获取父,同,子级元素的更多相关文章
- JQuery获取父,子,兄弟节点
jQuery.parent(expr) // 查找父节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...
- Jquery遍历之获取子级元素、同级元素和父级元素
Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...
- JS和jQuery获取节点的兄弟,父级,子级元素
原文转自http://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的 ...
- 转载:js和jquery获取父级元素、子级元素、兄弟元素的方法
转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...
- js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素 原生的 ...
- JS获取节点的兄弟,父级,子级元素的方法(js获取子级获取到换行与空格元素-FF)
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 < ...
- js与jquery获取父元素,删除子元素的不同方法
var obj=document.getElementById("id");得到的是dom对象,对该对象进行操作的时候使用js方法 var obj=$("#id" ...
- JS获取节点的兄弟,父级,子级元素
https://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作 ...
- 使用jquery获取父元素或父节点的方法
今天面试题问到了,没答上,jq要继续学习啊 jquery获取父元素方法比较多,比如parent(),parents(),closest()这些都能帮你实现查找父元素或节点,下面我们来一一讲解: 先举个 ...
- 使用jquery获取父元素或父节点
使用jquery获取父元素或父节点,比较简单,jquery提供了丰富的方法来让我们使用jquery获取父元素或父节点 jquery获取父元素方法比较多,比如parent(),parents(),c ...
随机推荐
- 2017.10.3 国庆清北 D3T1 括号序列
题目描述 LYK有一个括号序列,但这个序列不一定合法. 一个合法的括号序列如下: ()是合法的括号序列. 若A是合法的括号序列,则(A)是合法的括号序列. 若A和B分别是合法的括号序列,则AB是合法的 ...
- P4425 【[HNOI/AHOI2018]转盘】
颂魔眼中的一眼题我大湖南竟无一人\(AC\) 首先我们考虑一个性质:我们肯定存在一种最优解,满足从某个点出发,一直往前走,不停下来. 证明:我们假设存在一种最优解,是在\(t_i\)的时候到达\(a\ ...
- opendir,readdir,closedir
结构体dirent: struct dirent { ino_t d_ino; //inode number off_t d_off; //offset to the next diret unsi ...
- sudo 命令
su命令和su -命令最大的本质区别就是: 前者只是切换了root身份,但Shell环境仍然是普通用户的Shell: 而后者连用户和Shell环境一起切换成root身份了.只有切换了Shell环境才不 ...
- 【洛谷】P3518 [POI2011]SEJ-Strongbox
题目描述 有一个密码箱,0到n-1中的某些整数是它的密码. 且满足,如果a和b都是它的密码,那么(a+b)%n也是它的密码(a,b可以相等) 某人试了k次密码,前k-1次都失败了,最后一次成功了. 问 ...
- mac安装rust的pyo3模块
Rust 发布的工具链包括了 stable.beta 和 nightly 三种不同版本. nightly 是最激进的版本,包含了大量(可能不稳定)的新/高级特性.stable 版本目前可能还不支持一些 ...
- 常用app分类
西瓜视频 今日头条(极速版) 喜马拉雅 扫描全能王 蜻蜓FM 每天影视 抖音 小读 樊登读书 微信读书 懒人听书 京东 找靓机 拼多多 淘宝 小米有品 当当 什么值得买 小米商城 淘票票 懂车帝 小红 ...
- Python 画 直方图/条形图/柱状图
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/u011489887/article/de ...
- spring线程池的应用
加载xml文件 在ApplicationContext.xml文件里面添加 xmlns:task="http://www.springframework.org/schema/task&qu ...
- Linux内存中的Cache真的能被回收吗? 【转】
在Linux系统中,我们经常用free命令来查看系统内存的使用状态.在一个RHEL6的系统上,free命令的显示内容大概是这样一个状态: [root@tencent64 ~]# free ...