javascript - 查找最近的元素，而不是最近的元素

Question

我的印象是 closest() 会给我最近的匹配元素，正如它所建议的，但我错了，它会给我最近的祖先，parents() 也是如此>。那么我怎样才能得到最近的元素呢？

例如我有 2 个 div 如下

<div id="clickme">
    Click me
</div>
<div class="findme" style="display:none">
    Find me
</div>

如果我想通过 #clickme 获取 .findme 该怎么办。

我可以做类似 $('#click').helpfullFunctionThatGivesNearestElement('.findme') 的操作吗？

或者我需要像 $('findme') 一样扫描整个 DOM？但可能有数百个 .findme 那么我如何找到最接近特定元素的呢？

更新

.findme 可以位于 DOM 中的任何位置。

Answer 1

这就是递归遍历 DOM 的样子。

我已经实现了函数$.fn.nearest，因为OP假设使用jQuery，所以可以用$('clickme'来调用它).nearest('.findme');

该方法将通过递归搜索在每个方向(父级、子级、下一个和上一个)向前和向后查找来找到多个元素**(如果它们与起始节点的距离相同)通过最近的检查元素。它还避免了一遍又一遍地检查一个元素(即多个子元素的父元素仅检查一次)。

如果您不需要检查特定方向，即 children 或 prev，您只需注释该部分即可。

在递归完成之前会进行一些检查。当在 DOM 中找不到选择器时，将返回一个空的 jQuery 元素，当只找到一个元素时，也会返回找到的元素。

我还没有测试过它在大型 HTML 上的效率，这完全取决于所需元素的位置多远，而这与 HTML 结构的复杂性直接相关。但可以肯定的是，它是指数级的，接近 O(n3) 或 O(n⁴)。

尝试一下。

$.fn.nearest = function(selector) {
  var allFound = $(selector);

  if (!allFound.length) // selector not found in the dom
    return $([]);

  if (allFound.length == 1) // found one elem only
    return allFound;
  else
    return nearestRec($(this), selector);

  function nearestRec(elems, selector) {
    if (elems.length == 0)
      return this;

    var selector = selector;
    var newList = [],
      found = $([]);

    $(elems).each(function(i, e) {
      var options = e[1] || {};
      e = $($(e)[0]);

      // children
      if (!options.ignoreChildren)
        updateFound(e.children(), selector, newList, found, {
          ignoreParent: true
        });

      // next
      if (!options.ignoreNext)
        updateFound(e.next(), selector, newList, found, {
          ignoreParent: true,
          ignorePrev: true
        });

      // prev
      if (!options.ignorePrev)
        updateFound(e.prev(), selector, newList, found, {
          ignoreParent: true,
          ignoreNext: true
        });

      // parent
      if (!options.ignoreParent)
        updateFound(e.parent(), selector, newList, found, {
          ignoreChildren: true
        });
    });

    return found.length && found || nearestRec(newList, selector);

    function updateFound(e, selector, newList, found, options) {
      e.each(function() {
        var el = $(this);
        if (el.is(selector)) {
          found.push(el);
          return;
        }

        newList.push([el, options]);
      });
    }
  }
};


$(function() {
  // multiple elems found, traverse dom
  $(".clickme").nearest(".findme").each(function() {
    $(this).addClass("found");
  });
});

div {
  padding: 5px 3px 5px 10px;
  border: 1px solid #666;
  background-color: #fff;
  margin: 3px;
}
.found {
  background-color: red;
}
.clickme {
  background-color: #37a;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="findme">
  findme
  <div class="findme">
    findme
    <div>
      &nbsp;
      <div>
        &nbsp;
      </div>
      <div>
        &nbsp;
      </div>
      <div class="clickme">
        clickme
        <div>
          &nbsp;
        </div>
        <div>
          &nbsp;
          <div class="findme">
            findme
            <div class="findme">
              findme
            </div>
          </div>
          <div class="findme">
            findme
          </div>
        </div>
      </div>
      <div>
        &nbsp;
        <div class="findme">
          findme
        </div>
      </div>
      <div class="findme">
        findme
      </div>
    </div>

    <div class="findme">
      findme
      <div>
        &nbsp;
      </div>
      <div>
        &nbsp;
      </div>
      <div class="findme">
        findme
        <div class="findme">
          findme
        </div>
      </div>
      <div>
        &nbsp;
      </div>
      <div class="findme">
        findme
      </div>
    </div>
  </div>
</div>