javascript - jQuery 最接近(DOM 树内部和外部)

Question

给定一个元素和 any 选择器，我需要找到与其匹配的最接近的元素，无论它是在元素内部还是外部。

目前jQuery不提供这样的遍历功能，但是有需要。这是场景:

许多项目的列表，其中 <button>元素驻留在 <a> 内

<ul>
  <li>
    <a>
      <button>click me</button>
      <img src="..." />
    </a>
  </li>
  <li>
    <a>
      <button>click me</button>
      <img src="..." />
    </a>
  </li>
  ...
</ul>

或者<button>元素可能位于 <a> 之外元素

<ul>
  <li>
    <a>
      <img src="..." />
    </a>
    <button>click me</button>
  </li>
  <li>
    <a>
      <img src="..." />
    </a>
    <button>click me</button>
  </li>
  ...
</ul>

非常非常基本的代码如下所示:

$('a').closest1('button'); // where `closest1` is a new custom function
// or
$('a').select('> button') // where `select` can parse any selector relative to the object, so it would also know this:
$('a').select('~ button') // where the button is a sibling to the element

已知元素是<a>其他任何事情都可能改变。我想找到最近的<button>给定 <a> 的元素元素，无论该按钮位于 <a> 内部还是外部的 DOM 树。

native jQuery 函数“closest ”将按照名称所示执行并找到最接近的函数，这是非常合乎逻辑的，但正如您所知，它仅向上搜索。 (在我看来，它应该以不同的方式命名)。

<小时/>

有谁知道执行上述操作的自定义遍历函数吗？谢谢。 (我问你们是因为肯定有人写过这个，但我很不幸在互联网上找到了线索)

Answer 1

这是使用我在评论中提到的想法的另一次尝试:

$(this).parents(':has(button):first').find('button').css({
        "border": '3px solid red'
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/z3vwk1ko/40/

它基本上查找包含两个元素(clicked 和 target)的第一个祖先，然后找到目标。

性能:

关于速度，这是在人类交互速度下使用的，即每秒几次最大，因此如果它解决了问题，那么作为“慢速选择器”是无关紧要的，在相当明显的情况下方式，用最少的代码。与快速选择器相比，您必须每秒单击 100 次才能注意到任何不同:)