有时候会遇到循环出来的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>
没有点击之前:
点击小二 之后: