jquery获取元素(父级的兄弟元素的子元素)
一、获取父级元素
使用jquery获取父级元素: parent()
例如:$(this).parent('ul');
二、获取同级元素
使用jquery获取同级元素:siblings()
例如:$(this).parent('ul').siblings();
三、获取子级元素
使用jquery获取子级元素:find()
例如:$(this).parent('ul').siblings().find('li');
常用例:(点击进行切换)
$(function(){
$('.xxx li').click(function(){
//addClass给当前元素添加一个on的类
$(this).addClass('on');
//并且把当前的兄弟元素的on类移除
$(this).siblings().removeClass('active');
//把当前的父元素ul的兄弟元素的子元素li移除on类
$(this).parent('ul').siblings().find('li').removeClass('on');
//遍历xxx-x当前的ndex并且添加一个sho的类,移除兄弟元素的sho类
$('.xxx-x').eq($(this).index()).addClass('sho').siblings().removeClass('sho')
});
});
常用例:(点击显示和隐藏)
$(function(){
$('.xxx').click(function(){
console.log(this)
if($('#xx').hasClass('on')){
$('#xx').removeClass('on');
$('#xx').css({
'display' : 'none',
})
}else{
$('#xx').addClass('on');
$('#xx').css({
'display' : 'block',
})
}
})
})
jquery获取元素(父级的兄弟元素的子元素)的更多相关文章
- jQuery获取所有父级元素及同级元素及子元素的方法
jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...
- IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?
position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...
- Java IO,io,文件操作,删除文件,删除文件夹,获取文件父级目录
Java IO,io,文件操作,删除文件,删除文件夹,获取文件父级目录 这里先简单的贴下常用的方法: File.separator //当前系统文件分隔符 File.pathSeparator // ...
- jQuery 父级,祖先,兄弟,等选择性操作
jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...
- jquery的父级和兄弟级能做多少网页特效
这里说的父级就是parent 兄弟级就是siblings 我这里说一个导航栏用到的特效 主要jquery代码$(this).parent().addClass(“active”).siblings( ...
- ie7 父元素宽度自适应且为浮动的话 子元素的宽度将不能按比例设置问题
好久没切图,昨天遇到个浏览器兼容的老问题,在ie7下,父元素设置浮动后,其宽度是自适应的,子元素的宽度若没有确定则将显示最小宽度,即文本所占的宽度. 正常其他浏览器显示如下: ie7中显示效果如下: ...
- SQL根据指定节点ID获取所有父级节点和子级节点
--根据指定节点ID获取所有子节点-- WITH TEMP AS ( SELECT * FROM table_name WHERE Id=' --表的主键ID UNION ALL SELECT T0. ...
- SQL根据指定节点ID获取所有父级节点和子级节点(转载)
--根据指定节点ID获取所有子节点-- WITH TEMP AS ( ' --表的主键ID UNION ALL SELECT T0.* FROM TEMP,table_name T0 WHERE TE ...
随机推荐
- bzoj4035 [HAOI2015]数组游戏
这题显然把每个白格子看成一个子游戏 一个白格子$x$的$sg$值是$mex{[0,sg[2x],sg[2x] XOR sg[3x].....]}$ 打表发现一个数的$sg$值只和$n/x$有关,然后分 ...
- hdu 2899 Strange fuction 模拟退火
求 F(x) = 6 * x^7+8*x^6+7*x^3+5*x^2-y*x (0 <= x <=100)的最小值 模拟退火,每次根据温度随机下个状态,再根据温度转移 #include& ...
- BZOJ_1408_[Noi2002]Robot_数学
Description Input Output Sample Input 3 2 1 3 2 5 1 Sample Output 8 6 75 HINT 90号机器人有10个老师,加上它自己共11个 ...
- 如何解决在ie下,Echarts多次使用setOption更改数据时,数据错乱问题
一.问题描述 根据用户的操作,通过Ajax请求,获取某段时间内的某数据趋势折线图数据.用户切换数据项或更改时间段时,ie中渲染的折线图包含了上一次获取的数据,导致数据错乱,如下图所示: 二.代码 数据 ...
- Error【0003】:配置桥接网络报错
1.1 问题背景 在配置cosole宿主机的桥接网络环境时,在修改完/etc/sysconfig/ifcg-ethx和/etc/sysconfig/ifcg-brx后,执行service networ ...
- Vue.js-08:第八章 - 组件的基础知识
一.前言 在之前的学习中,我们对于 Vue 的一些基础语法进行了简单的了解,通过之前的代码可以清晰的看出,我们在使用 Vue 的整个过程,最终都是在对 Vue 实例进行的一系列操作. 这里就会引出一个 ...
- Android版数据结构与算法(七):赫夫曼树
版权声明:本文出自汪磊的博客,未经作者允许禁止转载. 近期忙着新版本的开发,此外正在回顾C语言,大部分时间没放在数据结构与算法的整理上,所以更新有点慢了,不过既然写了就肯定尽力将这部分完全整理好分享出 ...
- .NET(WinCE、WM)转Android开发——Xamarin和Smobiler对比
对比 WinCE Android 行业场景 扫描分拣.车载.工控 扫描分拣.车载定位 开发语言 C++.C# Java/.NET(Smobiler) 开发环境 Visual Studio Androi ...
- Redis调用的流程(新手使用)
就用查省市为例,别人还没查就把所有都弄好,很浪费资源和时间,redis是为了存储常用的查询操作的[结果],以此来减少直接查询数据库的次数,以下内容仅供参考,请勿照抄.(如有说得不好之处,请指点.) 言 ...
- Mybatis-Plus入门示例
1.内容: Mybatis-Plus只是在Mybatis的基础上,实现了功能增强,让开发更加简洁高效. Mybatis-Plus并没有修改Mybatis的任何特性. 2.入门示例: 2.1 需求:使用 ...