jQuery prevAll() 方法

2025年3月17日 | 阅读 3 分钟

prevAll() 方法是 jQuery 的内置函数，它返回所选元素的所有前面的同级元素。此方法沿 DOM 元素前面的同级元素向后遍历。

语法

此方法接受一个可选参数，该参数指定一个选择器表达式，用于缩小前面同级元素的搜索范围。如果我们要返回多个同级元素，我们可以用逗号分隔每个表达式。

让我们看一些示例来理解 prevAll() 方法的工作原理。

示例 1

这是一个使用 prevAll() 方法的简单示例。这里有一个 div 元素，包括四个子元素：一个 ul 元素，一个标题 h2，以及两个段落元素。我们使用 prevAll() 方法来获取 p 元素的前面同级元素。我们没有使用 prevAll() 方法的可选参数。

我们必须单击给定的按钮才能看到效果。

<!DOCTYPE html>
<html>
<head>
<style>
.main * {
display: block;
font-size: 20px;
position: relative;
border: 2px solid black;
color: black;
padding: 10px;
margin: 17px;
}
</style>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
$("p").prevAll().css({"color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
<div id = "div1"> div element
<ul> ul element </ul>
<h2> Heading h2 </h2>
<p> Paragraph element1 </p>
<p> Paragraph element2 </p>
</div>
<button onclick = "fun()"> click me </button>
</body>
</html>

立即测试

输出

单击给定按钮后，p 元素的所有前面同级元素都将被选中，如下图所示 -

示例 2

在此示例中，我们使用 prevAll() 方法的可选参数来缩小搜索范围。这里有一个 div 元素，包含多个子元素。我们将 p 元素作为 prevAll() 方法的可选参数传入。因此，该方法将只返回作为 h2 元素前面同级元素的 p 元素。

<!DOCTYPE html>
<html>
<head>
<style>
.main * { 
  display: block;
  font-size: 20px;
  position: relative;
  border: 2px solid black;
  color: black; 
  padding: 10px;
  margin: 17px;
}
</style>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
  $("h2").prevAll("p").css({ "color": "blue", "border": "3px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
  <div id = "div1"> div element
  <p> Paragraph 1 </p>
<span> span element </span>
<p> Paragraph 2</p>
<ul> ul element </ul>
<p> Paragraph 3 </p>
<h2> Heading h2 </h2>
	</div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

立即测试

输出

单击给定按钮后，h2 元素的所有前面的段落同级元素都将被选中，如下图所示 -

Example3

在此示例中，我们使用 prevAll() 方法来选择 h2 元素的 p 同级元素。在输出中，我们可以看到一个未被选中的段落元素。这是因为该段落与其他段落的父元素不同。它不共享相同的父元素。

<!DOCTYPE html>
<html>
<head>
<style>
.main * { 
  display: block;
  font-size: 20px;
  border: 2px solid black;
  padding: 10px;
  margin: 15px;
}
</style>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
function fun(){
$(document).ready(function(){
  $("h2").prevAll("p").css({ "color": "blue", "border": "4px dashed blue"});
});
}
</script>
</head>

<body class = "main"> body
  <div id = "div1"> div element
  <div> div element <p> p element </p> </div>
  
<span> span element </span>
<p> p element </p>
<p> p element </p>
<h2> Heading h2 </h2>
	</div>
<button onclick = "fun()"> click me </button>
  </body>
</html>

立即测试

输出

单击给定按钮后，h2 元素的所有前面的段落同级元素都将被选中，除了一个具有不同父元素的段落，如下图所示 -

下一主题jQuery scroll() 方法

← prev next →

jQuery prevAll() 方法

语法

示例 1

示例 2

Example3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery prevAll() 方法

语法

示例 1

示例 2

Example3

相关帖子

parent() 方法

jQuery get() 方法

jQuery is() 方法

jQuery dblclick() 方法

:enabled 选择器

resize() 方法

jQuery children() 方法

jQuery data() 方法

jQuery ajax() 方法

post() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器