通过 jquery 获取 class 的普遍最接近的元素

Question

在我的代码中，一个按钮应该允许用户隐藏附近的 div。为了让事情变得抽象，每当一个按钮有一个 data-collapse="true" 属性时，jQuery 应该寻找最接近 class "collapsable" 的元素并隐藏它。问题是，在我的页面中，会有不同的层次结构，所以 .closest() 并不总是有效。让我指出一些可能的情况：

第一种情况：

<a data-collapse="true"></a>
<div class="collapsable"></div>

第二种情况：

<div class"controls">
    <a ...></a>
    <a ...></a>
    <a data-collapse="true"></a>
</div>
<div class="collapsable"></div>

第三种情况：

<div class="collapsable">
    ...
    <a data-collapse="true"></a>    
</div>

可能还有更多病例。

我的问题：是否有一种通用方法可以调用 a 按钮来查找 class "collapsable" 中最近的 div 而不管要查找哪个方向？比如，在两个方向上缩小直到找到匹配项？

Answer 1

您的问题：

有没有一种通用的方法可以调用a-button来寻找最近的div of class "collapsable" 而不管寻找哪个方向?

总之我会回答：没有！没有。

但是您可以像这样检查元素，这可能会有所帮助：

var $collapsable = $('a[data-collapse="true"]').next('.collapsable') ||
                   $('a[data-collapse="true"]').prev('.collapsable') ||
                   $('a[data-collapse="true"]').parent().next('.collapsable') || 
                   $('a[data-collapse="true"]').parent().prev('.collapsable') || 
                   $('a[data-collapse="true"]').parent().find('.collapsable') || 
                   $('a[data-collapse="true"]').closest('.collapsable');

Answer 2

这是我的想法：在被点击元素的父元素中进行递归搜索。

我已经用大量嵌套和分离的示例说明了代码，运行下面。

$("a[data-collapse=true]").click(function() {
    var $elem, $searchIn, max, result;
    $searchIn = $(this);
    $elem = null;
    result = null;
    max = 50; // Max recursiveness
    
    
    while (($elem === null) && max) {
      result = $searchIn.find('.collapsable');
      if (result.length) {
        $elem = result.first();
      }
      $searchIn = $searchIn.parent();
      max--;
    }
    
    $elem.css("border", "red dashed 2px");
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a href="#" data-collapse="true">Click me</a>
  <div class="collapsable">I should get red</div>
</div><br/><br/>
<div>
  <div>
      <a href="#" data-collapse="true">Click me</a>
   </div>
  <div>
    <div class="collapsable">I should get red</div>
  </div>
</div><br/><br/>
<div>
  <div>
     <div>
        <a href="#" data-collapse="true">Click me</a>
        <div>
          <div>
            <div>
              <div class="collapsable">I should get red</div>
            </div>
          </div>
        </div>
     </div>
  </div>
</div><br/><br/>
<div>
  <div>
    <div>
      <div>
        <div>
          <div><a href="#" data-collapse="true">Click me</a></div>
        </div>
      </div>
    </div>
    <div>
      <div>
        <div>
          <div>
            <div>
              <div class="collapsable">I should get red</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

通过 jquery 获取 class 的普遍最接近的元素

Get universally closest element of a class via jquery

jquery

selector

closest