如何获取选中元素的首个含一级复选框后代的父元素？

你遇到的问题很明确：当选中嵌套结构里的复选框时，parents()会返回所有符合条件的祖先元素，但你只需要唯一的、最近的那个拥有直接子级复选框的父LI（比如选中LI8的复选框时，只想拿到LI4）。

问题根源 #

1. parents()的行为：这个方法会遍历所有祖先节点，返回所有匹配选择器的元素，而不是只返回最近的那一个。
2. 选择器不够精准：原选择器li:has(input[type='checkbox'])会匹配所有包含复选框的LI（不管复选框是直接子级还是间接后代），导致像LI6这种本身没有直接子级复选框但后代有的元素也被选中。

解决方案 #

我们需要做两个关键调整：

• 用closest()代替parents()，它会从当前节点的父级开始向上查找，只返回第一个匹配的元素。
• 优化选择器为li:has(> input[type='checkbox'])，确保只匹配那些直接包含复选框作为子元素的LI（也就是拥有一级后代复选框的父元素）。
• 额外：如果需要排除当前复选框所在的LI（比如选中LI8时不想返回LI8自己），需要先定位到当前LI，再从它的父容器开始查找。

修改后的完整代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="UL1">
<li class="LI1">
<input class="checkbox1" type="checkbox" />
<span>LI1</span>
<ul class="UL2">
<li class="LI3">
<input class="checkbox2" type="checkbox" />
<span>LI3</span>
</li>
<li class="LI4">
<input class="checkbox3" type="checkbox" />
<span>LI4</span>
<ul class="UL3">
<li class="LI5">
<span>LI5</span>
</li>
<li class="LI6">
<span>LI6</span>
<ul class="UL4">
<li class="LI7">
<span>LI7</span>
</li>
<li class="LI8">
<input class="checkbox4" type="checkbox" />
<span>LI8</span>
</li>
<li class="LI9">
<span>LI9</span>
</li>
</ul>
</li>
<li class="LI10">
<span>LI10</span>
</li>
</ul>
</li>
<li class="LI11">
<span>LI11</span>
</li>
</ul>
</li>
<li class="LI12">
<input class="checkbox5" type="checkbox" />
<span>LI12</span>
</li>
</ul>
</div>

<script>
$('input[type="checkbox"]').change(function(e) {
  // 先清除之前的高亮效果（可选）
  $("li > span").css("background-color", "");
  
  // 定位当前复选框所在的LI元素
  const currentLi = $(this).closest('li');
  // 从当前LI的父容器开始，查找最近的符合条件的祖先LI
  const targetParentLi = currentLi.parent().closest("li:has(> input[type='checkbox'])");
  
  // 如果找到目标元素，执行你的逻辑（这里是高亮示例）
  if (targetParentLi.length) {
    targetParentLi.find(">span").css("background-color", "yellow");
  }
});
</script>

代码说明 #

• currentLi = $(this).closest('li')：快速定位到当前复选框所在的LI，避免误匹配其他元素。
• currentLi.parent().closest(...)：跳过当前LI，从它的父容器开始向上查找，确保不会选中当前复选框所在的LI。
• li:has(> input[type='checkbox'])：>符号限定了复选框必须是LI的直接子元素，精准匹配你需要的父元素。

测试验证 #

• 选中LI8的复选框：会找到LI4，高亮其对应的<span>LI4</span>
• 选中LI4的复选框：会找到LI1，高亮<span>LI1</span>
• 选中LI1或LI12的复选框：没有符合条件的祖先LI，不会有高亮效果

内容的提问来源于stack exchange，提问作者dPatel1582