微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

jQuery 获取兄弟元素的几种不错方法_jquery

php中文网
发布： 2016-05-16 16:46:59
原创
1876人浏览过

获取指定元素的兄弟元素时，可以使用adjacent sibling combinator (+)，其中+的两侧内容都是selector expression.
如果要获取下例中所有的 h1的直接兄弟元素h2

复制代码 代码如下:


Main title


Section title


some content...


Section title


More content...

Hour One
Hour One

AI文字到视频生成

Hour One 37
查看详情 Hour One



可以直接使用
复制代码 代码如下:

$('h1 + h2')
// Select ALL h2 elements that are adjacent siblings of H1 elements.

如果要过滤h1的兄弟元素，当然也可以使用
复制代码 代码如下:

$('h1').siblings('h2,h3,p');
// Select all H2, H3, and P elements that are siblings of H1 elements.

如果要获取当前元素之后的所有兄弟元素，可以使用nextAll()
例如，针对下面的html代码
复制代码 代码如下:


  • First item

  • Second Item

  • Third item

  • Fourth item

  • Fifth item



如果要获取第二个条目之后的所有li元素，可以使用如下代码
复制代码 代码如下:

$('li.selected').nextAll('li');

上例也可以使用general sibling combinator (~)来实现
复制代码 代码如下:

$('li.selected ~ li');

获取直接兄弟元素也可以不使用selector，直接使用next()．
复制代码 代码如下:

var topHeaders = $('h1');
topHeaders.next('h2').css('margin', '0);

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：单元选择合并变色示例代码_jquery 下一篇：跟我学Nodejs（三）--- Node.js模块_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
深入JavaScript_Web Components WebComponents由自定义元素、影子DOM和HTML模板构成，支持创建可复用、隔离性强的独立组件，通过生命周期回调和属性监听实现响应式行为，适用于跨框架的高解耦前端开发。
2025-11-22 21:35:15
695
现代JavaScript_Record与Tuple Record与Tuple是JavaScript提案中的不可变数据类型，用{||}和#[]表示，支持值比较和不可变性，适用于优化性能和依赖检查。
2025-11-22 21:35:02
386
JavaScript虚拟机_V8引擎内部工作机制 V8引擎通过解析生成AST、Ignition与TurboFan协同编译、分代式垃圾回收及隐藏类优化属性访问，实现JavaScript高效执行。
2025-11-22 21:35:02
758
JavaScript模块化开发_ES6模块系统详解 ES6模块系统通过export和import实现静态模块化，支持命名导出、默认导出及动态导入import()，具备单例执行、严格模式和依赖预解析特性，是现代前端代码组织的标准方案。
2025-11-22 21:34:35
771
JavaScript函数组合_管道操作符进阶用法 函数组合与管道操作符通过串联函数提升代码可读性，compose从右到左执行，pipe从左到右；结合柯里化可构建复用处理链，如trim→toLowerCase→validateEmail；asyncPipe支持Promise链式调用，实现fetchUserById→getUserProfile→saveToLocalCache；配合tap调试，注意函数顺序与类型匹配，避免过度拆分及性能损耗。
2025-11-22 21:34:02
906
JavaScript状态管理_Redux状态机原理剖析 Redux通过单一状态树集中管理应用状态，确保状态只读并由纯函数reducer响应action进行更新，实现可预测的数据流控制。
2025-11-22 21:34:02
511
服务端JS：Node.js事件驱动架构解析 Node.js的核心优势在于事件驱动与非阻塞I/O。它通过单线程+事件循环机制，结合调用栈、回调队列、WorkerPool协作，实现高并发处理。异步操作如文件读取不阻塞主线程，完成后触发事件并执行回调。内置events模块支持自定义事件，广泛用于实时通信、API网关和日志系统等场景。
2025-11-22 21:32:02
392
JavaScript类型系统_TypeScript高级类型技巧 TypeScript的高级类型系统通过交叉类型、联合类型、映射类型、条件类型和类型保护等特性，提升代码安全性与可维护性。1.交叉类型（&）合并多个类型属性，适用于mixin模式；联合类型（|）支持多态值，结合类型守卫实现安全收窄。2.映射类型配合keyof可动态构造类型，如将属性设为只读或可选，常用于配置处理与表单校验。3.条件类型（TextendsU?X:Y）结合infer实现类型推断，可用于提取函数返回值、数组元素或Promise解包。4.类型保护通过typeof、in、instanceof
2025-11-22 21:27:07
610
JavaScript性能监控_关键指标采集分析 JavaScript性能监控的核心是采集关键指标以定位瓶颈、优化体验。首先通过PerformanceObserver获取首屏时间（FP/FCP）、最大内容绘制（LCP）和长任务，结合performance.timing计算可交互时间（TTI），并利用performance.mark/measure统计JS执行耗时；同时捕获错误与异常。其次监控内存使用（performance.memory）、资源加载耗时（getEntriesByType）及布局偏移（CLS）。最后采用采样上报、分阶段聚合、设置阈
2025-11-22 21:26:41
412
离线应用：PWA中的关键技术点 要让PWA在无网络环境下可用，需结合ServiceWorker、CacheAPI和WebAppManifest。首先通过ServiceWorker拦截请求并管理缓存，在离线时返回已缓存资源；其次利用CacheAPI实现对HTML、CSS、图片等资源的分类与版本化缓存，支持动态存储和更新策略；再通过manifest.json配置应用名称、图标、启动URL等，实现类原生体验；最后遵循离线优先设计原则，优先展示缓存内容，提供离线提示，并在网络恢复后同步数据。1.ServiceWorker是核心，负责请
2025-11-22 21:25:24
414
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部