jQuery遍历之同级遍历

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_30736301

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/guangzhou11/p/7571425.html

本文介绍了一个使用jQuery进行DOM元素选择与样式修改的例子。通过`.prevUntil()`方法，演示了如何选择并修改从指定元素到另一个指定元素之间的所有元素。此外还介绍了其他jQuery选择器方法，如`siblings()`、`next()`、`nextAll()`、`nextUntil()`、`prev()`和`prevAll()`等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jquery</title>
		<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
		<script type="text/javascript" src="js/try.js" ></script>
		<style>
			 .div * {
			 	display: block;
			 	width:300px;
			 	padding:8px;
			 	margin: 10;
			 	color:seagreen;
			 	border:4px solid seagreen;
			 }
		</style>
		
	</head>
	<body>
		<div class="div">
			<p>P</p>
			<h2>h2</h2>
			<h3>h3</h3>
			<h4>h4</h4>
			<h5>h5</h5>
			<h6>h6</h6>
		</div>
	</body>
</html>

　　1.sibings() 同级元素全部修改 h4

2.next() 下一个元素修改 h4

3.nextAll() 下面元素全部修改 h4

4.nextUntil() 下面元素的区间修改 h2 到h6

5.prev 上一个元素修改 h4

6.preAll 上面元素全部修改 h4

7.preUntil 下面元素的区间修改 h4到p

修改方法就可以例如：preAll prev

$(document).ready(function(){
       $("h4").prevUntil("P").css({border:"4px solid  black"})  

});

转载于:https://www.cnblogs.com/guangzhou11/p/7571425.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30736301

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

jQuery 遍历 – 祖先

12-13

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

jQuery 遍历函数详解

10-23

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

参与评论您还未登录，请先登录后发表或查看评论

jquery遍历-同级遍历

wangjingyi

01-21

607

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

JQuery递归解析无限层级JSON对象的所有key和value

程序员星痕的博客

07-29

9478

前一段时间做了一个小项目，要加一个json数据自动绑定前台表单的功能，类似于jquery-easyui里面的数据绑定（给它一个json对象，就能自动解析里面所有的数据。json数据的key对于表单的name属性，也可以是id或自己定义的标签属性，把key对应的值赋给对应名称的表单）。百度了许多JSON解析，都是前提知道json结构的情况下的解析，毛线的一点用都没有，最后看了一篇博客，明白了解析key

jQuery 学习04——遍历：定义、向上、向下、同级、过滤

weixin_30681615的博客

08-31

156

Query 遍历，意为"移动"，用于根据其相对于其他元素的关系来"查找"（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。下图展示了一个家族树。通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。图示解析： <div&gt...

javascript同级遍历_jQuery遍历之同级遍历

weixin_35926446的博客

12-30

htmljquery.div * {display: block;width:300px;padding:8px;margin: 10;color:seagreen;border:4px solid seagreen;}Ph2h3h4h5h61.sibings() 同级元素全部修改 h42.next() 下一个元素修改 h43.nextAll() 下面元素全部修改 h44.nextUnt...

jQuery 遍历方法

likuoelie的博客

06-27

590

例如，$("li").each(function(index) { console.log(index + ": " + $(this).text());.find()：获取后代元素，如 $("ul").find("li").css("background-color", "yellow");.parent()：获取直接父元素，如 $("li").parent().css("border", "1px solid red");.each() 是常用方法，用于迭代元素集合，执行特定操作。

jQuery遍历之同级遍历（siblings、next、nextAll、nextUntil方法）

飞翔的仙女杀手的博客

05-16

395

在div中写下如下代码 div class="bd"> <p>P</p> <h2>h2</h2> <h3>h3</h3> <h4>h4</h4> <h5>h5</h5> <h6>h6</h6> </div...

jQuery 遍历方法总结

风清扬的专栏

03-16

8414

5、each()，用于为每个匹配元素执行函数；在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素。prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素。

jquery遍历多个li_21个jQuery遍历节点方法详解

weixin_39912163的博客

12-19

636

本篇教程介绍了21个jQuery遍历节点方法详解，希望阅读本篇文章以后大家有所收获，帮助大家对jQuery的理解更加深入。<1.children()方法:$('div').children()---遍历查找div元素的所有子元素节点1Hello23HelloAgain4您好!56AndAgain789$('div').children();...

jQuery遍历节点树方法分析

10-21

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

jquery 遍历学习

12-26

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

jQuery遍历之next()、nextAll()方法使用实例

10-25

### jQuery遍历之next()、nextAll()方法使用实例在本文中，我们将深入探讨jQuery库中next()和nextAll()这两个遍历方法，它们允许开发者获取当前选定元素的下一个同级元素或所有后续同级元素。通过实例代码演示，...

IT毕设梦工厂的博客

08-21

1475

基于大数据的北京气象站数据可视化分析系统摘要：本系统采用Hadoop+Spark大数据框架，结合Django/Spring Boot后端与Vue前端，实现了对北京气象数据的多维度分析与可视化展示。系统支持年度气温变化、降水量趋势、极端天气事件等分析，通过Spark分布式计算高效处理海量数据，为气象研究提供决策支持。开发采用Python/Java双语言，集成HDFS、Spark SQL等技术，实现数据存储、处理与可视化全流程。系统界面包含数据大屏、时间序列分析、空间分布等模块，有效提升了气象数据的分析效率。

css的white-space: pre

qq_51035159的博客

08-22

485

简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。

react样式问题

qq_44136028的博客

08-22

389

React组件样式控制主要有三种方式：1）内联样式，通过style属性传递JavaScript对象，支持动态样式但需驼峰命名；2）CSS类名，使用className绑定静态样式；3）CSS-in-JS（如styled-components），将CSS嵌入JS生成带样式组件，支持动态主题切换。三种方式各具特点，内联样式适合简单动态样式，CSS类名适合静态样式，CSS-in-JS适合复杂组件化样式需求。

Figma MCP 的作用与使用方法

最新发布

pumpkin84514的博客

08-23

736

（如 Cursor、Claude Code 等）无缝集成的技术，旨在将 Figma 设计稿高效转换为代码，提升设计与开发的协作效率。的结合，显著提升了设计到代码的转换效率。开发者只需完成环境配置与链接粘贴，即可实现设计稿的自动化代码生成，减少手动工作量并降低出错率。Figma MCP（Model Context Protocol）是一种通过。，用于与 Figma 和 AI 工具通信。Figma MCP 需要本地运行一个。Figma MCP 通过。

JavaScript基础语法five

2301_79744908的博客

08-21

427

本文介绍了JavaScript中对象的基本概念和使用方法。对象是一种无序的数据集合，由属性和方法组成，可以通过点语法或方括号访问属性。文章详细讲解了对象的增删改查操作、方法的定义与调用，以及使用for-in遍历对象的技巧。同时介绍了Math内置对象及其常用方法（如ceil、floor、round等），包括随机数生成公式和猜数字案例的实现。最后指出null属于object类型，并提供了生成N-M范围随机数的通用公式。

从入门到精通：Java设计模式——单例模式

m0_73590302的博客

08-21

859

本文先解析单例模式 “确保类仅一个实例、提供全局访问点” 的定义，及唯一性、自我实例化、全局访问三大特点，说明其节省资源、保数据一致性的作用。接着详解饿汉式、懒汉式（含线程安全与不安全）、双重检查锁、静态内部类、枚举 6 种实现方式，分析各方式代码、原理、优缺点，尤其聚焦懒汉式多线程安全问题与双重检查锁中 volatile 的作用。还介绍单例在日志记录器、配置管理器等场景的应用，对比优缺点，关联 Spring 框架中 Bean 的单例管理，最后总结要点并给出设计模式学习建议。

AI推理革命：从Sequential Thinking到Agentic AI的演进之路——揭秘大语言模型思维进化的四重奏

许泽宇的技术分享

08-22

1081

想象一下，当你在解决一个复杂的数学题时，你不会直接给出答案，而是会在草稿纸上一步步地推导。这就是序列化思维的本质——将复杂问题分解为一系列有序的步骤。在传统的大语言模型中，AI往往像一个"直觉型天才"，能够直接给出答案，但却无法解释推理过程。这就像一个学生告诉你"答案是42"，但却说不出为什么是42一样。Sequential Thinking的出现，让AI开始学会"慢思考"。# 传统模式：直接回答return model.generate(question) # 直接输出最终答案。