记录--jquery 获取父级、子级、兄弟元素 + 实例
需求如下:
三条数据,需点击其中一条数据在其下面展示与此数据关联的图片。主要功能可能是在点击的数据下增加显示行
思路:
把需要点击增加的数据先隐藏、点击后再将其显示出来。
知识点:
jQuery.parent(expr) //找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr) //类似于jQuery.parents(expr),但是是查找所有祖先元素,不限于父元素 jQuery.children(expr) //返回所有子节点,这个方法只会返回直接的孩子节点,不会返回所有的子孙节点 jQuery.contents() //返回下面的所有内容,包括节点和文本。这个方法和children()的区别就在于,包括空白文本,也会被作为一个jQuery对象返回,children()则只会返回节点 jQuery.prev() //返回上一个兄弟节点,不是所有的兄弟节点 jQuery.prevAll() //返回所有之前的兄弟节点 jQuery.next() //返回下一个兄弟节点,不是所有的兄弟节点 jQuery.nextAll() //返回所有之后的兄弟节点 jQuery.siblings() //返回兄弟姐妹节点,不分前后 jQuery.find(expr) //跟jQuery.filter(expr)完全不一样。jQuery.filter()是从初始的jQuery对象集合中筛选出一部分,而jQuery.find()的返回结果,不会有初始集合中的内容,比如$("p"),find("span"),是从p元素开始找,等同于$("p span").
实例:
<script type="text/javascript">
$(function(){ }) function dj(obj){
$(obj).parent().parent().next().children('.tp').show();
$(obj).parent().parent().next().siblings().children('.tp').hide();
}
</script>
<div id="table">
<table width="500px" border="1px">
<thead>
<tr>
<th>id</th>
<th>条件</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td>13335555</td>
<td>折</td>
<td><a href="javascript:void(0)" onclick="dj(this)">爱</a></td>
</tr>
<tr>
<td class="tp" colspan="3"><img src="" alt="tup"/></td>
</tr>
<tr>
<td>2</td>
<td>折</td>
<td><a href="javascript:void(0)" onclick="dj(this)">爱</a></td>
</tr>
<tr>
<td class="tp" colspan="3"><img src="" alt="tup"/></td>
</tr>
<tr>
<td>3</td>
<td>折</td>
<td><a href="javascript:void(0)" onclick="dj(this)">爱</a></td>
</tr>
<tr>
<td class="tp" colspan="3"><img src="" alt="tup"/></td>
</tr>
</tbody>
</table>
</div>
记录--jquery 获取父级、子级、兄弟元素 + 实例的更多相关文章
- JQuery获取父,子,兄弟节点
jQuery.parent(expr) // 查找父节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent ...
- JQuery的父、子、兄弟节点查找,节点的子节点循环
Query.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children( ...
- Jquery中父,子页面之间元素获取及方法调用
一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...
- JQuery的父、子、兄弟节点查找,节点的子节点循环
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
- jQuery的父,子,兄弟节点查找方法
以下罗列一下jQery下节点查找的方法: jQuery.parent(expr) 找父亲节点.能够传入expr进行过滤,比方$("span").parent()或者$(" ...
- JQuery的父、子、兄弟节点查找方法
jQuery.parent(expr) //找父元素 jQuery.parents(expr) //找到所有祖先元素,不限于父元素 jQuery.children ...
- iframe获取父、子窗口的元素和方法
原文地址:https://www.cnblogs.com/BlingSun/p/7484237.html jQuery.js调用iframe父窗口与子窗口元素的方法(亲测有效) 子页面获取父页面的id ...
- 转载:js和jquery获取父级元素、子级元素、兄弟元素的方法
转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...
- js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素 原生的 ...
随机推荐
- Vmware虚拟机三种网络模式详解(转)
原文来自http://note.youdao.com/share/web/file.html?id=236896997b6ffbaa8e0d92eacd13abbf&type=note 我怕链 ...
- Win10怎么打开或关闭自动维护功能
- mysql主从复制之mysql-proxy实现读写分离
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://lansgg.blog.51cto.com/5675165/1242674 本文系 ...
- RSAProtectedConfigurationProvider加密web.config
上一篇文章介绍了用 DataProtectionConfigurationProvider加密web.config文件的方法,不过他有一个缺陷,加密的文件只有在本机才能解密,如果有多台服务器的话,则需 ...
- OpenJudge百炼习题解答(C++)--题4074:积水量
题: 总时间限制: 1000ms 内存限制:65536kB 描写叙述 凹凸不平的地面每当下雨的时候总会积水.如果地面是一维的.每一块宽度都为1,高度是非负整数.那么能够用一个数组来表达一块 ...
- linux kvm 的虚拟机处于暂停状态怎么开机 和 KVM-Virsh指令
[root@ok home]# virsh list Id Name State ---------------------------------------------------- 13svn ...
- Python内置函数之int()
class int(x, base=10) 返回一个整型对象.默认返回0. 参数x可以是字符串,也可以是浮点数. base指x的进制形式,比如2表示2进制,10表示10进制.特别需要注意的是,0表示任 ...
- ISO/IEC14443 ATS(Answer to Select)详解
原文: https://www.duoluodeyu.com/2322.html 发表评论 777 A+ 所属分类:智能卡 长度字节TL 格式字节T0 接口字节TA(1) 接口字节TB(1) 接口 ...
- redis数据类型List的安全队列和不安全队列
在学习RPOPLPUSH命令的时候,官方文档中有提到安全队列和不安全的队列,一开始没有看懂,现在理解了做个笔记. 一般情况下,我们可以借助List来实现消息队列,比如一个客户端通过命令LPUSH(BL ...
- yii save model return id null
/** * Creates a new model. * If creation is successful, the browser will be redirected to the 'view' ...