扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >jquery如何查询同级元素
  • 134

0
分享到

jquery如何查询同级元素

2024-04-02 19:04:59 134人浏览 安东尼
摘要

这篇文章主要为大家展示了“Jquery如何查询同级元素”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jquery如何查询同级元素”这篇文章吧。

这篇文章主要为大家展示了“Jquery如何查询同级元素”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jquery如何查询同级元素”这篇文章吧。

查询方法：1、用siblings()方法，可获得同级所有元素；2、用next()方法，可获得下一个同级元素；3、用nextAll()；4、用nextUntil()；5、用prev()；6、用prevAll()；7、用prevUntil()。

jquery如何查询同级元素

本教程操作环境：windows7系统、jquery1.10.2版本、Dell G3电脑。

jquery查询同级元素

在jquery中，查询同级元素一般有七个方法：siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil()

  • siblings()方法，主要用于获得指定元素的同级所有元素

  • next()方法，主要用于获得指定元素的下一个同级元素

  • nextAll()方法，主要用于获得指定元素的下一个同级的所有元素

  • nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素

  • prev()方法，主要用于获得指定元素的上一级同级元素

  • prevAll()方法，主要用于获得指定元素上一级所有的同级元素

  • prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素

siblings()方法

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<div><span>Hello</span></div>
		<p class="selected">Hello Again</p>
		<p>And Again</p>

		<script>
			$("p").siblings(".selected").CSS("background", "yellow");
		</script>

	</body>
</html>

jquery如何查询同级元素

next()方法

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>
		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li class="third-item">list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>

		<script>
			$('li.third-item').next().css('background-color', 'red');
		</script>

	</body>
</html>

jquery如何查询同级元素

nextAll()方法

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
	</head>

	<body>

		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li class="third-item">list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
		</ul>

		<script>
			$('li.third-item').nextAll().css('background-color', 'red');
		</script>

	</body>
</html>

jquery如何查询同级元素

nextUntil()方法

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").nextUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
				<li class="start">li (类名为"start"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的下一个兄弟节点)</li>
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回在类名为“star”和类名为“stop”的 li元素之间的所有下一个兄弟元素。</p>

	</body>
</html>

jquery如何查询同级元素

prev()方法

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prev().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li>li (兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>

	</body>
</html>

jquery如何查询同级元素

prevAll()方法

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prevAll().css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (parent)
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li>li (类名为"start"的li的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回类名称为“star”的li元素之前的所有兄弟元素。</p>

	</body>
</html>

jquery如何查询同级元素

prevUntil()方法

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<style>
			.siblings * {
				display: block;
				border: 2px solid lightgrey;
				color: lightgrey;
				padding: 5px;
				margin: 15px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("li.start").prevUntil("li.stop").css({
					"color": "red",
					"border": "2px solid red"
				});
			});
		</script>
	</head>
	<body>

		<div style="width:500px;" class="siblings">
			<ul>ul (父节点)
				<li class="stop">li (类名为"stop"的兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li>li (类名为"start"的li节点的上一个兄弟节点)</li>
				<li class="start">li (类名为"start"的li节点)</li>
				<li>li (兄弟节点)</li>
				<li>li (兄弟节点)</li>
			</ul>
		</div>
		<p>在这个例子中,我们返回在类名为“star”和“stop”的li元素之间的所有上一个兄弟元素,。</p>

	</body>
</html>

jquery如何查询同级元素

以上是“jquery如何查询同级元素”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网VUE频道！

--结束END--

本文标题: jquery如何查询同级元素

本文链接: https://lsjlt.com/news/93702.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • jquery如何查询同级元素
    这篇文章主要为大家展示了“jquery如何查询同级元素”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jquery如何查询同级元素”这篇文章吧。 ...
    99+
    2024-04-02
  • jquery如何查询子元素
    小编给大家分享一下jquery如何查询子元素，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ jque...
    99+
    2024-04-02
  • jquery如何清除同级元素
    这篇文章主要为大家展示了“jquery如何清除同级元素”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jquery如何清除同级元素”这篇文章吧。 ...
    99+
    2024-04-02
  • jquery如何获取同级元素
    在jquery中获取同级元素的方法：1.新建html项目，引入jquery；2.在项目中创建html标签；3.使用siblings()方法获取同级元素；具体步骤如下：首先，在新建一个html项目，在项目中引入jquery；<scrip...
    99+
    2024-04-02
  • jquery如何查找同辈元素
    今天小编给大家分享一下jquery如何查找同辈元素的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一...
    99+
    2024-04-02
  • jquery如何查询子元素个数
    这篇“jquery如何查询子元素个数”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jque...
    99+
    2024-04-02
  • jquery如何查询上一个元素
    本篇内容介绍了“jquery如何查询上一个元素”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2024-04-02
  • jquery如何查询所有子元素
    本篇内容主要讲解“jquery如何查询所有子元素”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery如何查询所有子元素”吧! ...
    99+
    2024-04-02
  • jQuery如何重用你的元素查询
    这篇文章将为大家详细讲解有关jQuery如何重用你的元素查询，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。重用你的元素查询var allItems = $("div...
    99+
    2023-06-27
  • jquery如何查询节点内的元素
    本文小编为大家详细介绍“jquery如何查询节点内的元素”，内容详细，步骤清晰，细节处理妥当，希望这篇“jquery如何查询节点内的元素”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。查询方法：1、使用childr...
    99+
    2023-07-05
  • jquery如何获取前几个同级元素
    这篇文章主要介绍“jquery如何获取前几个同级元素”，在日常操作中，相信很多人在jquery如何获取前几个同级元素问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”jquery...
    99+
    2024-04-02
  • jquery如何查询最后一个子元素
    本篇内容介绍了“jquery如何查询最后一个子元素”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2024-04-02
  • jquery如何清除同级非选中的元素
    本篇内容介绍了“jquery如何清除同级非选中的元素”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2024-04-02
  • jquery怎么查询数组元素
    本篇内容介绍了“jquery怎么查询数组元素”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2024-04-02
  • jquery如何删除上级元素
    这篇文章将为大家详细讲解有关jquery如何删除上级元素，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 删除方法：1、用unwrap()方法删...
    99+
    2024-04-02
  • jQuery如何使用子查询缓存的父元素
    小编给大家分享一下jQuery如何使用子查询缓存的父元素，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！使用子查询缓存的父元素正如...
    99+
    2024-04-02
  • jquery如何查询当前元素是第几个tr
    本篇内容主要讲解“jquery如何查询当前元素是第几个tr”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“jquery如何查询当前元素是第几个tr”吧! ...
    99+
    2024-04-02
  • jquery如何将父级元素隐藏
    这篇文章主要介绍了jquery如何将父级元素隐藏的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇jquery如何将父级元素隐藏文章都会有所收获，下面我们一起来看看吧。 ...
    99+
    2024-04-02
  • jquery怎么查询节点内的元素
    本教程操作环境：windows7系统、jquery3.6版本、Dell G3电脑。查询节点内的元素，就是查询指定节点的子元素。jquery查询子元素有两种方法：children()方法：获取该元素下的直接子集元素find()方法：获取该元素...
    99+
    2023-05-14
    jQuery
  • jquery如何查找隐藏的元素
    今天小编给大家分享一下jquery如何查找隐藏的元素的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作