点击div元素后，如何统计两个tag div间的可见div数量并隐藏空tag？

问题背景 #

需要实现以下功能：

• 点击任意.element元素后，隐藏该元素
• 统计该元素所在的两个.tag元素之间剩余的可见.element数量
• 当该区间内无可见.element时，隐藏对应的两个.tag元素

但使用这段代码时出现“不是函数”的报错：

var visibleLeft = $(this).closest("div.tag").nextUntil("div.tag").find("div.element:visible").length;

报错原因 #

.closest("div.tag")无法找到目标元素——因为.element的直接父级是.container，而.tag与.container是同级关系，closest()是向上查找父元素，所以找不到.tag，导致后续的.nextUntil()调用在非jQuery对象上，触发“不是函数”的错误。

解决方案代码 #

HTML结构

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tag">Tag</div>
<div class="container">
  <div class="element">Element 1</div>
  <div class="element">Element 2</div>
  <div class="element">Element 3</div>
</div>
<div class="tag">Tag</div>
<div class="container">
  <div class="element">Element 1</div>
  <div class="element">Element 2</div>
  <div class="element">Element 3</div>
  <div class="element">Element 4</div>
</div>

jQuery实现代码

$(document).on('click', '.element', function() {
  // 隐藏当前点击的元素
  $(this).hide();
  
  // 定位当前元素所在的容器
  const $container = $(this).closest('.container');
  // 获取容器前后的两个tag元素
  const $prevTag = $container.prev('.tag');
  const $nextTag = $container.next('.tag');
  
  // 统计两个tag之间所有可见的.element数量
  const visibleElementCount = $prevTag.nextUntil($nextTag).find('.element:visible').length;
  
  // 若区间内无可见元素，隐藏对应的两个tag
  if (visibleElementCount === 0) {
    $prevTag.hide();
    $nextTag.hide();
  }
});

代码说明 #

1. 先通过closest('.container')找到当前元素的父容器，再用prev('.tag')和next('.tag')精准定位到区间的两个tag元素，避免找不到元素的问题。
2. nextUntil($nextTag)会获取$prevTag之后到$nextTag之前的所有元素，再通过find('.element:visible')筛选出可见元素并统计数量。
3. 当可见元素数量为0时，直接隐藏前后两个tag元素，满足需求。

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