通过jquery获得类的普遍最接近的元素

In my code a button should allow the user to hide a nearby div. To make things abstract, whenever a button has a data-collapse="true" attribute, jQuery should look for the closest element of class "collapsable" and hide it. The problem is, in my page, there will be different cases of hierarchy, so .closest() won't always work. Let me point out some of the possible cases:

在我的代码中,一个按钮应该允许用户隐藏附近的div。为了使事情变得抽象,只要按钮具有data-collapse =“true”属性,jQuery就应该查找“collapsable”类的最接近元素并隐藏它。问题是,在我的页面中,会出现不同的层次结构,因此.closest()并不总是有效。让我指出一些可能的情况:

First case:

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

Second case:

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

Third case:

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

There might be more cases potentially.

可能存在更多案例。

My question: Is there a universal method to call on the a-button to look for the nearest div of class "collapsable" regardless of which direction to look for? Like, just zooming out in both directions until a match is found?

我的问题:是否有一种通用的方法来调用a按钮来查找最近的“可折叠”类div而不管要查找哪个方向?比如,只是在两个方向上缩小,直到找到匹配为止?

2 个解决方案

#1

Here's what I came up with : a recursive search in the clicked element's parents.

这就是我想出的:在点击元素的父母中进行递归搜索。

I have illustrated the code with heavily nested and separated couples examples, run it below.

我已经用重度嵌套和分离的两个例子说明了代码,在下面运行它。

$("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>

#2

Your question:

Is there a universal method to call on the a-button to look for the nearest div of class "collapsable" regardless of which direction to look for?

是否有一种通用的方法来调用a按钮来查找最近的“可折叠”类div而不管要查找哪个方向?

in short i would answer it: No! there is not.

总之,我会回答:不!那没有。

But you could check for the elements like this, may be this could help:

但你可以检查这样的元素,这可能会有所帮助:

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');

#1