我是靠谱客的博主 乐观大门,最近开发中收集的这篇文章主要介绍jquery怎么查询最后一个子元素,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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

jquery查询最后一个子元素的两种方法

方法1:使用children():last-child选择器

  • 使用children()获取指定父节点下的全部直接子元素

  • 利用:last-child选取子元素集合中最后一个元素,即最后一个子元素

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
				$("ul").children(":last-child").css("color","red");
            })
        })
    </script>
	</head>
	<body>
		<ul>
			<li>香蕉</li>
			<li>苹果</li>
			<li>梨子</li>
			<li>橘子</li>
		</ul>
		<button>父元素ul的最后一个子元素</button>
	</body>
</html>
登录后复制

1.gif

方法2:使用children()和eq()

  • 使用children()获取指定父节点下的全部直接子元素

  • 利用eq(-1)选取子元素集合中最后一个元素,即最后一个子元素

在上例的基础上,修改:

$(function() {
	$("button").click(function() {
		$("ul").children().eq(-1).css("color", "red");
	})
})
登录后复制

2.gif

【推荐学习:jQuery视频教程、web前端视频】

以上就是jquery怎么查询最后一个子元素的详细内容,更多请关注靠谱客其它相关文章!

最后

以上就是乐观大门为你收集整理的jquery怎么查询最后一个子元素的全部内容,希望文章能够帮你解决jquery怎么查询最后一个子元素所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(66)

评论列表共有 0 条评论

立即
投稿
返回
顶部