遍历DOM树，获取所有兄弟节点
获取兄弟节点的常用方法有：
| 方法 | 说明 |
| 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> <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树，获取所有兄弟节点的更多相关文章
- 先序遍历DOM树的5种方法
DOM树由文档中的所有节点(元素节点.文本节点.注释节点等)所构成的一个树结构,DOM树的解析和构建是浏览器要实现的关键功能.既然DOM树是一个树结构,那么我们就可以使用遍历树结构的相关方法来对DOM ...
- 函数遍历DOM树
//获取页面中的根节点--根标签 var root=document.documentElement;//html //函数遍历DOM树 //根据根节点,调用fn的函数,显示的是根节点的名 ...
- 拷贝和遍历DOM树
一.浅拷贝: 拷贝就是复制,就相当于把一个对象中的所有内容,复制一份给另一个对象,直接复制, 或者说,就是把一个对象的地址给了另外一个对象,他们的指向相同,两个对象之间有相同的属性或者方法,都可以使用 ...
- JS高级---遍历DOM树
遍历DOM树 第一个函数: 给我根节点, 我会找到所有的子节点: forDOM(根节点) 获取这个根节点的子节点 var children=根节点的.children 调用第二个函数 第二个 ...
- jQuery向上遍历DOM树之parents(),parent(),closest()之间的区别
http://www.poluoluo.com/jzxy/201312/253059.html 在这个sprint中,因为要写前端UI,所以用到了jQuery,但是jQuery在向上遍历DOM树的AP ...
- js 原生方法获取所有兄弟节点
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 遍历DOM树
遍历DOM在jQuery中是非常重要的技术. 遍历DOM之前,需要对DOM有清晰的认识,了解文档节点.元素节点.属性节点.文本节点等相关概念.不清楚可以温习下<JavaScript教程.DOM树 ...
- 遍历DOM树，获取子节点
获取子节点的方法有: 方法 说明 children() 选取子节点,可以带过滤参数.但只能选择子节点,不能选择孙子节点. find() 选取子节点,可以带过滤参数.可以选择子节点及孙子节点 ...
- 遍历DOM树，获取父节点
通过获取父节点,还可以获取父节点的父节点. 有3个常用方法: 方法 说明 parent() 选取父节点 parents() 选取所有父节点 parentsUntil("div&q ...
随机推荐
- 解决在word中不能使用输入法
打开一个Word文档-------------->单击 文件---->选项---->高级---->取消什么?看图 然后重新启动word
- synergy一个鼠标键盘控制多台电脑
有些时候我们同时操作多台电脑,但是我们只用一个鼠标和一个键盘,如果通过转换器啊或者是多个鼠标键盘就非常不方便了 下面我介绍一下通过安装synergy这个软件来给开发人员提供方便 这个软件安装比较简单, ...
- Intorduction To Computer Vision
本文将主要介绍图像分类问题,即给定一张图片,我们来给这张图片打一个标签,标签来自于预先设定的集合,比如{people,cat,dog...}等,这是CV的核心问题,图像分类在实际应用中也有许多变形,而 ...
- LeetCode 1:1. 两数之和
给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样的元 ...
- django---单表操作之增删改
首先找到操作的首页面‘ 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- python－多线程和线程池
import threading # 点击查看它的用法 传统多线程方案会使用“即时创建, 即时销毁”的策略. from multiprocessing.dummy import Pool # 线程池 ...
- CouldnotcreatetheJavaVirtualMachine/1709
Section A: symptom -------------------- SWPM1024 S/4hana 1709 安装过程中遇到error, 错误提示错误信息在/tmp/sapinst_ ...
- Linux实用命令整理
说明 点击标题可进入详细讲解的章节 0. 基本命令 linux 基本命令整理 1. 压缩 解压 tar -zcvf a.tar.gz a #把a压缩成a.tar.gz tar -zxvf a.tar. ...
- c# 和 java <转载>http://www.cnblogs.com/zhucai/archive/2011/02/16/csharp-compare-java.html
从语法层面来讲,c# 和 java 是非常相似的. <转载> 这篇文章对C#与Java做一个语言级的对比,方便C#转Java或Java转C#的人有个大致了解.这里大致用C#3.0与Java ...
- hive 函数
collect_set(x) 列转行函数---没有重复, 组装多列的数据的结构体collect_list(x) 列转行函数---可以有重复,组装多列的数据的结构体concat_ws 拼接函数, 用 ...