获取兄弟节点的常用方法有:

 方法  说明
siblings()  选取所有兄弟节点
next()  选取后面兄弟节点
nextAll()  选取所有后面的兄弟节点
nextUntil()  选取所有后面的兄弟节点,但不包含后面指定的节点及指定节点的弟弟……。
prev()  选取前面的兄弟节点
prevAll()  选取所有前面的兄弟节点
prevUntil()  选取所有前面的兄弟节点,但不包含后面指定的节点及指定节点的哥哥……。

获取所有兄弟节点

使用方法siblings()

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>兄弟节点</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"></script>
        <style>
            .box{
                border: 1px solid blueviolet;
                padding: 1px;
                margin-bottom: 12px;
            }
        </style>
    </head>
    <body>
        <div>
            <ul id="ul">
                <li id="a">油条</li>
                <li id="b">包子</li>
                <li id="c">米饺</li>
                <li id="d"><a>鱼粉</a></li>
            </ul>
        </div>
        <script>
            $('#c').siblings().attr("class", "box");
        </script>
    </body>
</html>

获取下个兄弟节点

使用方法next()

示例:

1
$('#c').next().attr("class", "box");

获取所有后面的兄弟节点

使用方法nextAll()

示例:

1
$('#a').nextAll().attr("class", "box");

获取所有前面的兄弟节点

$('#a').prevAll().attr("class", "box");
取所有后面的节点,但不包含其中的一个。
$('#c').nextUntil().attr("class", "box");

遍历DOM树,获取所有兄弟节点的更多相关文章

  1. 先序遍历DOM树的5种方法

    DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM ...

  2. 函数遍历DOM树

    //获取页面中的根节点--根标签   var root=document.documentElement;//html   //函数遍历DOM树   //根据根节点,调用fn的函数,显示的是根节点的名 ...

  3. 拷贝和遍历DOM树

    一.浅拷贝: 拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制, 或者说,就是把一个对象的地址给了另外一个对象,他们的指向相同,两个对象之间有相同的属性或者方法,都可以使用 ...

  4. JS高级---遍历DOM树

    遍历DOM树  第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点)  获取这个根节点的子节点  var children=根节点的.children  调用第二个函数  第二个 ...

  5. jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别

    http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...

  6. js 原生方法获取所有兄弟节点

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  7. 遍历DOM树

    遍历DOM在jQuery中是非常重要的技术. 遍历DOM之前,需要对DOM有清晰的认识,了解文档节点.元素节点.属性节点.文本节点等相关概念.不清楚可以温习下<JavaScript教程.DOM树 ...

  8. 遍历DOM树,获取子节点

    获取子节点的方法有:  方法  说明  children()  选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点.  find()  选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...

  9. 遍历DOM树,获取父节点

    通过获取父节点,还可以获取父节点的父节点. 有3个常用方法: 方法  说明  parent()  选取父节点  parents()  选取所有父节点  parentsUntil("div&q ...

随机推荐

  1. 如何查看yum 安装的软件路径

    1.首先安装一个redis [root@iZbp1eem925ojwyx17ao9kZ ~]# yum install redis 2.查找redis的安装包 [root@iZbp1eem925ojw ...

  2. Keras.applications.models权重:存储路径及加载

    网络中断原因导致keras加载vgg16等模型权重失败, 直接解决方法是:删掉下载文件,再重新下载 Windows-weights路径: C:\Users\你的用户名\.keras\models Li ...

  3. lua 安装

    1:下载安装 curl -R -O http://www.lua.org/ftp/lua-5.3.0.tar.gz tar zxf lua-5.3.0.tar.gz cd lua-5.3.0 make ...

  4. MapReduce的工作机制

    <Hadoop权威指南>中的MapReduce工作机制和Shuffle: 框架 Hadoop2.x引入了一种新的执行机制MapRedcue 2.这种新的机制建议在Yarn的系统上,目前用于 ...

  5. Java 7-Java 循环结构 - for, while 及 do…while

    Java 循环结构 - for, while 及 do...while 顺序结构的程序语句只能被执行一次.如果您想要同样的操作执行多次,,就需要使用循环结构. Java中有三种主要的循环结构: whi ...

  6. Android MVP案例;

    就一个十分简单的获取列表数据并展示的Demo:分别使用MVC和MVP实现: 先来一个假的数据源: //假设这就是数据源 public class UserBean { public static Li ...

  7. 字符串切分 String.Split 和 Regex.Split(小技巧)

    当切割字符串的是单个字符时可使用String.Split string strSample="ProductID:20150215,Categroy:Food,Price:15.00&quo ...

  8. 禁用SSL v2.0、SSL v3.0协议

    1.禁用SSL v2.0.SSL v3.0协议,禁用低强度加密密钥.使用TLS 1 TLSv1.1 TLSv1.2版本.2.禁用SSLv2参考修补方法如下:查看本机sslv3加密列表:openssl ...

  9. VMware扩展Linux根目录磁盘空间(Centos版本)

    1.Centos 关机,选择编辑虚拟机设置,硬盘,在实用工具那里选择“扩展”,指定你需要的存储大小 2.启动客户机操作系统Centos,查看磁盘情况 输入指令 fdisk -l 显示结果如下 Disk ...

  10. 剑指Offer(四):重建二叉树

    说明: 1.本系列是根据<剑指Offer>这个系列做的一个小笔记. 2.直接动力是因为师兄师姐找工作很难,而且机械出生的我面试算法更难. 3.刚开始准备刷LeetCode.LintCode ...