js中通过父级parent函数和next函数进行查找定位元素

本文链接：https://blog.youkuaiyun.com/guo_qiangqiang/article/details/121078846

本文介绍JavaScript中jQuery的parent()方法使用技巧，演示了如何利用此方法定位到DOM树中的父级元素，并提供了具体示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js中通过父级parent函数和find函数进行查找定位元素

parent() 方法
- 定义和用法
- 详细说明
实例代码

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();
});