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

 方法  说明
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. KPPW2.5 漏洞利用--SQL注入

    KPPW2.5 漏洞利用--SQL注入 SQL注入--布尔型盲注 环境搭建 1,集成环境简单方便,如wamp,phpstudy.... 2,KPPW v2.2源码一份(文末有分享)放到WWW目录下面 ...

  2. GAC 注册查看与删除

    1.复制以下命令粘贴到以管理员权限运行的命令行程序里,回车运行(前提条件得有gacutil.exe注册工具): cd "C:\NETFX 4.0 Tools" 以windows7 ...

  3. U3D学习005——输入操作

    1.input管理器 edit-project settings-input 2.getaxis——虚拟轴获取 获取水平和垂直的输入和其他输入(input管理器中定义的) 3.对象的transform ...

  4. Apache提供的dbUtils

    一.介绍 apache组织为我们提供了dbUtils实用工具(一些jar包),封装了一些查询的类和借口,相对自己定义的来说,可以简化很多操作 dbUtils提供了核心功能 1.QueryRunner  ...

  5. Python的多态、继承与封装

    一.多态 不用知道变量所引用的对象类型,还是能对它进行操作,它会根据对象(或类)的类型不同而表现出不同的行为. def run_twice(animal): animal.run() animal.r ...

  6. C# 委托在线程与UI界面之间的应用

    前景:我们在使用线程的时候,经常会想要访问到Form窗体的控件,也就是线程与UI界面交互,但是他们隶属于连个不同的线程,所以是不能直接访问的,这个时候我们就可以通过委托来实现.打个比方,你想要给远方的 ...

  7. Java虚拟机------JVM分析工具

    主要介绍JVM的分析工具: jps jps:Java Virtual Machine Process Status Tool http://docs.oracle.com/javase/1.5.0/d ...

  8. 《Linux 性能及调优指南》1.1 Linux进程管理

    https://blog.csdn.net/ljianhui/article/details/46718835 本文为IBM RedBook的Linux Performanceand Tuning G ...

  9. SVN上拖下来的项目,缺少build path怎么办?

    在eclipse里用subeclipe从svn上拖下来的项目,看不见java build path怎么办? 原因那是因为你的两个配置文件:.project .classpath没有内容或者缺失. 重新 ...

  10. 变量,if.elif .else判断

    一,计算机的了解 基本组成:主板+cpu+内存 cpu: 主频, 核数(16) 内存:大小(8G, 16G, 32G) 型号: DDR3, DDR4, DDR5,  主频(海盗船,玩家国度)      ...