js中通过父级parent函数和find函数进行查找定位元素
parent() 方法
定义和用法
parent() 获得当前匹配元素集合中每个元素的父元素,使用选择器进行筛选是可选的。
详细说明
如果给定一个表示 DOM 元素集合的 jQuery 对象,.parent() 方法允许我们在 DOM 树中搜索这些元素的父元素,并用匹配元素构造一个新的 jQuery 对象。.parents() 和 .parent() 方法类似,不同的是后者沿 DOM 树向上遍历单一层级。
该方法接受可选的选择器表达式,与我们向 $() 函数中传递的参数类型相同。如果应用这个选择器,则将通过检测元素是否匹配该选择器对元素进行筛选。
请思考这个带有基本的嵌套列表的页面:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script>
$('li.item-a').parent().css('background-color', 'red');
</script>
</body>
</html>
此次调用的结果是,为 level-2 列表设置红色背景。由于我们未应用选择器表达式,父元素很自然地成为了对象的一部分。如果已应用选择器,则会在包含元素之前,检测元素是否匹配选择器。
实例代码
<div class="wenku_list">
<div class="wenku_pic">
<img class="input-btn_wenku" src="https://www.qipa250.com/WenKu/20210114110029552685780856.jpg" alt="">
</div>
<input type="file" class="file_wenku" style="display:none" accept="image/*">
<input type="hidden" class="wenku_pic_id" name="wenku_pic_id" value="9601">
<p style="text-align: center;margin-top: 5px">
第1张图片</p>
</div>
js代码
//点击input-btn_wenku 时,得到父级parent(),使用next得到与父级同级class名称为file_wenku的元素,
$(document).on('click', ".input-btn_wenku", function () {
//点击上传 找到下一个file_wenku节点
$(this).parent().next(".file_wenku").click();
});