jquery获得$(this)下面的指定的子元素

有时候会遇到循环出来的div,实现用户点击其中一个,据此进行其他操作,我们可以用$(this)来获取用户点击的div,但是如果没有其他的标志来区分这些循环出来的div的话(比如lang值的不同),我们如何获得点击的div的子元素呢?

方法有两种,都是jQuery中获得子元素的方法------- .find ()  和  .children ()

find查找所有的子元素,会一直查找,跨层级查找;

children 查找直接的子元素,不会跨层级查找。

这是一个小demo

场景:实现的是4个完全相同的div,用户点击其中一个,我们获得点击的这个div中的人的名字,为了看一下效果,这里点击的div,背景会变成粉色,在控制台上打印出点击的div下的人名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.t_ys{
				background-color: #2F89F1;
				height: 50px;
				width: 600px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: white;
				margin-top: 10px;
			}

		</style>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>	
	</head>
	<body>
		<div class="t_ys">
			<div class="name">小一</div>
			<div class="xh">12345678901</div>
			<div class="js">我是小一</div>
		</div>
		<div class="t_ys">
			<div class="name">小二</div>
			<div class="xh">12345678902</div>
			<div class="js">我是小二</div>
		</div>
		<div class="t_ys">
			<div class="name">小三</div>
			<div class="xh">12345678903</div>
			<div class="js">不存在三</div>
		</div>
		<div class="t_ys">
			<div class="name">小四</div>
			<div class="xh">12345678904</div>
			<div class="js">我是小四</div>
		</div>
	</body>
	<script type="text/javascript">
		$(".t_ys").click(function(){
			$(this).css("background-color","#FF01C7");
			//方法一 find查找所有的子元素,会一直查找,跨层级查找 
			var choose_name_1= $(this).find(".name").html();
			console.log("choose_name_1-------"+choose_name_1);
			//方法二 children 查找直接的子元素,不会跨层级
			var choose_name_2 = $(this).children(".name").html();
			console.log("choose_name_2-------"+choose_name_2);
		})
	</script>
	
</html>

没有点击之前:

点击小二 之后:

猜你喜欢

转载自blog.csdn.net/weixin_41863239/article/details/82048464
今日推荐