一、获取父级元素

  使用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获取元素(父级的兄弟元素的子元素)的更多相关文章

  1. jQuery获取所有父级元素及同级元素及子元素的方法

    jQuery获取所有父级元素及同级元素及子元素的方法 1.获取父级元素 $("#id").parent() 获取其父级元素 $("#id").parents() ...

  2. IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1个像素的偏差

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 当父级是body时,子元素设置position:absolute;定位是根据body还是html呢?

    position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定 ...

  4. Java IO,io,文件操作,删除文件,删除文件夹,获取文件父级目录

    Java IO,io,文件操作,删除文件,删除文件夹,获取文件父级目录 这里先简单的贴下常用的方法: File.separator //当前系统文件分隔符 File.pathSeparator // ...

  5. jQuery 父级,祖先,兄弟,等选择性操作

    jQuery.parent(expr) 找父亲节点,可以传入expr进行过滤,比如$("span").parent()或者$("span").parent(&q ...

  6. jquery的父级和兄弟级能做多少网页特效

    这里说的父级就是parent  兄弟级就是siblings 我这里说一个导航栏用到的特效 主要jquery代码$(this).parent().addClass(“active”).siblings( ...

  7. ie7 父元素宽度自适应且为浮动的话 子元素的宽度将不能按比例设置问题

    好久没切图,昨天遇到个浏览器兼容的老问题,在ie7下,父元素设置浮动后,其宽度是自适应的,子元素的宽度若没有确定则将显示最小宽度,即文本所占的宽度. 正常其他浏览器显示如下: ie7中显示效果如下: ...

  8. SQL根据指定节点ID获取所有父级节点和子级节点

    --根据指定节点ID获取所有子节点-- WITH TEMP AS ( SELECT * FROM table_name WHERE Id=' --表的主键ID UNION ALL SELECT T0. ...

  9. SQL根据指定节点ID获取所有父级节点和子级节点(转载)

    --根据指定节点ID获取所有子节点-- WITH TEMP AS ( ' --表的主键ID UNION ALL SELECT T0.* FROM TEMP,table_name T0 WHERE TE ...

随机推荐

  1. bzoj 4565 状压区间dp

    我还以为我状压很好...... 噗!!! 果然我区间很差... f[i][j][s]表示i~j段,合并后的状态为s所得的最大收益 枚举i,j,k,s. f[i][j][s<<1]=max( ...

  2. bzoj 2500 幸福的道路 树上直径+set

    首先明确:树上任意一点的最长路径一定是直径的某一端点. 所以先找出直径,求出最长路径,然后再求波动值<=m的最长区间 #include<cstdio> #include<cst ...

  3. angular开发环境配置全套教程

    第一步.安装node.js 1.需要下载的文件路径:https://nodejs.org/en/download/ 2.安装nodejs: 3.验证node.js 4.npm安装以及验证: npm的安 ...

  4. Tomcat启动失败的几种解决办法

    1.重复映射 用Eclipse开发,新建了的servlet会有一个url-pattern声明: 这样就不需要在web.xml中添加映射,如果在web.xml中添加了这样一段: <servlet& ...

  5. XSS攻击(出现的原因、预防措施......)

    验证XSS攻击重点不是去查找可输入哪些内容会出现什么样的bug就是测试XSS攻击,重点是了解它出现的原理,为什么会出现XSS攻击,导致一些问题出现?如何防御与解决XSS攻击?以下我将简单介绍以上提出的 ...

  6. java泛型中使用的排序算法——归并排序及分析

    一.引言 我们知道,java中泛型排序使用归并排序或TimSort.归并排序以O(NlogN)最坏时间运行,下面我们分析归并排序过程及分析证明时间复杂度:也会简述为什么java选择归并排序作为泛型的排 ...

  7. MIP技术交流分享(3月9日)

    3月9日上周四下午,MIP 团队工程师与去哪儿酒店云.众荟的 Web 前端工程师进行了一次面对面的技术交流. 在这次交流中,MIP 工程师主要分享了 MIP 技术原理,MIP 加速原理,以及 MIP ...

  8. 【.NET异步编程系列1】:await&async语法糖让异步编程如鱼得水

    前导 Asynchronous programming Model(APM)异步编程模型以BeginMethod(...) 和 EndMethod(...)结对出现. IAsyncResult Beg ...

  9. Vue.js 牛刀小试(持续更新~~~)

    一.前言 这个系列的文章开始于今年9月从上一家公司辞职后,在找工作的过程中,觉得自己应该学习一些新的东西,从前几章的更新日期也可以看出,中间隔了很长的时间,自己也经历了一些事情,既然现在已经稳定了,就 ...

  10. C# 语音合成

    1. 引用System.Speech 2. 通过SpeechSynthesizer类朗读文本 new SpeechSynthesizer().SpeakAsync("我们都是好孩子We're ...