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 ...
随机推荐
- bzoj5251 [2018多省省队联测]劈配
直接网络流模拟即可AC. 可持久化+暴力=90分, 可持久化+二分=30分, 暴力加边+二分=100分. 我也很无奈啊. Ivan便涨红了脸,额上的青筋条条绽出,争辩道,“memcpy也是可持久化…… ...
- BZOJ_1316_树上的询问_点分治
BZOJ_1316_树上的询问_点分治 Description 一棵n个点的带权有根树,有p个询问,每次询问树中是否存在一条长度为Len的路径,如果是,输出Yes否输出No. Input 第一行两个整 ...
- .net中的线程同步基础(搬运自CLR via C#)
线程安全 此类型的所有公共静态(Visual Basic 中为 Shared)成员对多线程操作而言都是安全的.但不保证任何实例成员是线程安全的. 在MSDN上经常会看到这样一句话.表示如果程序中有n个 ...
- Netty实现高性能IOT服务器(Groza)之精尽代码篇中
运行环境: JDK 8+ Maven 3.0+ Redis 技术栈: SpringBoot 2.0+ Redis (Lettuce客户端,RedisTemplate模板方法) Netty 4.1+ M ...
- Bug的严重等级和优先级别与分类
一. Bug的严重等级定义: 1. Blocker 即系统无法执行.崩溃或严重资源不足.应用模块无法启动或异常退出.无法测试.造成系统不稳定. 严重花屏 内存泄漏 用户数据丢失或破坏 系统崩溃/死机/ ...
- Shell中去除字符串前后空格的方法
[root@local ~]# echo " A BC " A BC [root@local ~]# eval echo " A BC " A BC 或者 [r ...
- Java基础知识回顾之七 ----- 总结篇
前言 在之前Java基础知识回顾中,我们回顾了基础数据类型.修饰符和String.三大特性.集合.多线程和IO.本篇文章则对之前学过的知识进行总结.除了简单的复习之外,还会增加一些相应的理解. 基础数 ...
- Redis数据结构和常用API
Redis是一个速度非常快的非关系型数据库,可以存储键与5中不同数据结构类型之间的映射.这5种数据结构分别是STRING(字符串).LIST(列表).SET(集合).HASH(散列).ZSET(有序集 ...
- 2025战略,中秋送福利!免费开源ERP Odoo Windows 一键傻瓜式安装版发布
概述 为了帮助更多的小白,能够快速的体验Odoo的强大功能,针对国内大多数小白用户无法快速直接体验Odoo的尴尬,开源智造呕心沥血,历经数百次的测试和整合终于赶在中秋节这天将Odoo所需要的复杂运行环 ...
- Android For OpenCV的环境搭建
OpenCV是一个基于BSD许可(开源)发行的跨平台计算机视觉库,可以运行在Linux.Windows.Android和Mac OS操作系统上.它轻量级而且高效--由一系列 C 函数和少量 C++ 类 ...