`

jquery遍历-同级遍历

 
阅读更多
siblings() 返回被选元素的所有同胞元素。
next() 返回被选元素的下一个同胞元素。
nextAll() 方法返回被选元素的所有跟随的同胞元素。
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
prev(), prevAll() 以及 prevUntil() 方法类似，只不过方向相反：返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。 

<style>
.siblings *
{ 
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script>
$(document).ready(function(){
  $("h2").siblings().css({"color":"red","border":"1px solid red"});
  $("h2").nextAll().css({"color":"purple","border":"1px solid purple"});    
  $("h2").nextUntil("h6").css({"color":"green","border":"2px solid green"});
  $("h2").next().css({"color":"yellow","border":"1px solid yellow"});
});
</script>
</head>
<body class="siblings">
<div>div (父)
  <p>p</p>
  <span>span</span>
  <h2>h2</h2>
  <h3>h3</h3>
  <h4>h4</h4>
  <h5>h5</h5>
  <h6>h6</h6>
  <p>p</p>
</div>
</body>


  • 大小: 84.3 KB
分享到：
| CSS hack
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery 遍历 学习

    这个“jQuery遍历学习”的主题主要关注如何使用jQuery来高效地遍历DOM元素，以实现对网页内容的控制和操作。 首先，jQuery提供了多种遍历方法，包括基本的选择器和遍历函数。选择器如`$()`用于选取DOM元素，可以...

    jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

    综上所述，nextUntil()和prevUntil()方法是jQuery遍历功能中非常有用的工具，它们让开发者可以灵活地选择元素集之间的同胞元素，便于进行特定的DOM操作和样式修改。在使用这两个方法时，需要确保选择器的正确性以及...

    jQuery 3.1 标准课程第六章 遍历遍历同级元素的

    jQuery 3.1 标准课程第六章 遍历遍历同级元素的方法(三)

    jquery遍历节点树

    本文将深入探讨jQuery如何遍历节点树，并给出实际应用示例。 首先，我们需要理解什么是节点树。HTML文档可以看作是一棵树形结构，其中每个HTML元素都是一个节点，包括元素节点、文本节点、属性节点等。节点之间通过...

    jQuery 遍历 – 祖先

    结合其他jQuery方法，如`children()`（获取子元素）、`siblings()`（获取同级元素）等，可以构建出复杂而流畅的页面交互逻辑。此外，配合CSS选择器，这些遍历方法能够帮助开发者准确地选取需要操作的元素，从而实现...

    jQuery 遍历css选择器

    这篇教程将深入探讨jQuery如何遍历CSS选择器，并从中提取出相关知识点。 **一、jQuery选择器概述** jQuery支持多种CSS选择器，包括基本选择器（如`#id`、`.class`、`tag`）、关系选择器（如`&gt;`、`+`、`~`）、属性...

    jQuery遍历节点树方法分析

    本篇文章将重点介绍jQuery遍历节点树的常用方法，并结合实例展示这些方法的应用。 首先，我们需要了解基本的jQuery选择器。jQuery选择器允许我们以特定的模式选取页面中的DOM元素，比如通过id、类名、标签名或属性...

    jQuery 遍历函数详解

    下面我们详细讲解这些jQuery遍历函数的知识点。 .add()函数用于将元素添加到jQuery对象集合中。这个函数可以将新元素直接添加到现有的jQuery对象集合中，实现链式操作。 .andSelf()函数将之前操作返回的元素集添加...

    jquery1.6-1.7中文API文档

    六、遍历和过滤（Traversing & Filtering） 1. `children()`,`parent()`,`parents()`：获取元素的子元素、父元素及所有上级元素。 2. `siblings()`：获取同级元素。 3. `next()`与`prev()`：获取当前元素的下一个或...

    jQuery--遍历操作实例小结【后代、同胞及过滤】

    jQuery 是一个广泛使用的 JavaScript 库，它极大地简化了对网页中的 DOM 元素的操作，包括遍历和筛选。本文将详细介绍 jQuery 中针对后代、同胞及过滤遍历的相关函数和技巧。 1. **遍历后代** - `children()` 函数...

    jquery遍历函数siblings()用法实例

    通过对jquery遍历函数siblings()用法的介绍，以及结合实际的示例分析，我们可以看到如何利用这个函数来对页面元素的同级兄弟进行操作。对于使用jQuery进行前端开发的开发者来说，掌握此类函数能显著提高开发效率和...

    jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结

    如下图，显示了HTML中的结构树，通过 JQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。 遍历 – 父级...

    jQuery遍历DOM元素与节点方法详解

    以下是对jQuery遍历DOM元素与节点方法的详细解释： **一、向上遍历（祖先元素）** 1. `$(selector).parent([filter])`：返回匹配的元素的直接父元素。如果提供了过滤器`filter`，则只返回符合该过滤条件的父元素。...

    jQuery-1.6-api

    - `$.each()`：遍历数组或对象并执行函数。 2. **选择器（Selectors）**： - CSS选择器：jQuery支持大部分CSS2和CSS3选择器，如`#id`，`.class`，`tag`等。 - 链接选择器：`$("div &gt; p")`选择所有直接在div元素...

    jQuery-api-1.7.1

    5. **遍历和过滤（Traversal and Filtering）**： - `children()`: 获取匹配元素的所有子元素。 - `siblings()`: 获取匹配元素的所有同级元素。 - `next()`: 获取匹配元素的下一个兄弟元素。 - `prev()`: 获取...

    jQuery速成教程[收集].pdf

    jQuery 是一个广泛使用的JavaScript库，它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。本教程旨在快速引导你掌握jQuery的核心概念和技术，帮助你在短时间内提升网页开发的效率和质量。 ### 第一节：...

    浅析jQuery 遍历函数，javascript中的each遍历

    浅析jQuery遍历函数及其在JavaScript中的应用 jQuery作为一个强大的JavaScript库，提供了丰富的API供开发者使用，其中遍历函数是其核心功能之一。这些函数帮助我们有效地操作DOM元素，实现数据处理和页面交互。本文...

Magicbox
Global site tag (gtag.js) - Google Analytics