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 ...
随机推荐
- hello spring春天来了
这是小小小零食 废话不多说 现在看到 spring这个管家 先说第一个 ioc :在每个框架的中都有一个容器的概念,所谓的容器就是将常用的服务,封装起来,然后,用户只需要遵循一定的规则,就可以达到统 ...
- 将wiki人脸数据集的性别信息提取出来制作标签
import scipy.io as scio dataFile = 'D:\\Users\\a\\Documents\\Tencent Files\\178026882\\FileRecv\\wik ...
- 部署Chart应用并使用.net core读取Kubernetes中的configMap
上一篇文章讲了 k8s使用helm打包chart并上传到腾讯云TencentHub,今天就讲一下使用Helm部署应用并使用configMap代替asp.net core 中的appsettings.j ...
- 带你了解SDL
SDL(英语:Simple DirectMedia Layer)是一套开放源代码的跨平台多媒体开发库,使用C语言写成.SDL提供了数种控制图像.声音.输出入的函数,让开发者只要用相同或是相似的代码就可 ...
- re模块的方法总结
re模块的方法总结 一,查找 1:match 匹配string 开头,成功返回Match object, 失败返回None,只匹配一个. 示例: s="abc221kelvin4774&qu ...
- 一致性 Hash 算法的实际应用
前言 记得一年前分享过一篇<一致性 Hash 算法分析>,当时只是分析了这个算法的实现原理.解决了什么问题等. 但没有实际实现一个这样的算法,毕竟要加深印象还得自己撸一遍,于是本次就当前的 ...
- maven构建失败。
maven项目编译报“Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1” 解决方案:setting.x ...
- Java8新特性之四:接口默认方法和静态方法
在JDK1.8以前,接口(interface)没有提供任何具体的实现,在<JAVA编程思想>中是这样描述的:"interface这个关键字产生了一个完全抽象的类,它根本就没有提供 ...
- Python调用ansible API系列(五)综合使用
如何把动态生成资产信息.执行playbook以及自定义结果结合起来用呢? #!/usr/bin/env python # -*- coding: utf-8 -*- """ ...
- SpringBoot + Spring Security 学习笔记(五)实现短信验证码+登录功能
在 Spring Security 中基于表单的认证模式,默认就是密码帐号登录认证,那么对于短信验证码+登录的方式,Spring Security 没有现成的接口可以使用,所以需要自己的封装一个类似的 ...