javascript - 找到匹配项后防止在 jQuery 中向下遍历

Question

我希望使用一个选择器，一旦找到匹配项，它就会停止向下遍历，同时仍然遍历 sibling 。请考虑以下事项:

<ul>
  <li class='foo'>
    <ul>
      <li  class='bar'>
      </li>
    </ul>
  </li>
  <li class='baz'>
  </li>
</ul>

当使用选择器$('ul li')时，jQuery 将返回.foo、.bar 和。巴兹。理想情况下，我想要一个只有 .foo 和 .baz 的选择器。

我唯一的想法是:

1) 向上遍历寻找 $(selected).parents('ul ul') 作为排除的方法

2) 一次遍历一个 child 的层次结构，并在找到匹配项后停止遍历。

3) 使用 $.not() 方法排除 ul li ul li 像 $('ul li').not('ul li ul li')

所有这些解决方案看起来既不优雅又缓慢，因为它们需要多次调用 jQuery 并且与原生 DOM 方法(即 document.querySelectorAll)相去甚远。通常，我会选择 #3 并结束它，但我正在开发一个嵌入式系统，其中 cpu 周期非常宝贵，并且链接 jQuery 调用可能会导致性能下降。

有什么想法吗？

编辑:给出的示例只是我将搜索的可能树结构的抽象。用例是作为键盘导航库的一部分在页面上搜索最接近的匹配项。由于布局在结构上不同，我不能指望匹配项是直接后代。

Answer 1

您的问题的解决方案将需要 JavaScript，您的第一个和第三个想法是我看到您找到答案的地方。

澄清一下，CSS(和 jQuery)选择器是从右到左解释的。当您创建选择器时，最右边的选择器(键选择器)是您最终匹配的选择器。浏览器将找到键选择器，然后向上(/向后)搜索文档，直到找到匹配项或耗尽可能的匹配项。

目前没有父 CSS 选择器以其他方式执行此操作。

以下是使用 jQuery 获得所需行为的方法示例:http://jsbin.com/jazax/2/

您可以获取 ul 中包含的所有 li，然后在没有 li 父元素的情况下执行某些操作。

$("ul li").each(function() {

    var $this = $(this);
    if(!$this.parents("li").length) 
    {
      $this.prepend(":)");
    }

});

你可以

$("ul li").not("li ul li").each(function () {

  var $this = $(this);
  $this.prepend(":)");

});

或者进一步简化以减少 jQuery 需要匹配的选择器数量:

$("ul li").not("li li").each(function () {

  var $this = $(this);
  $this.prepend("3");

});

最后，这是一个演示性能比较的示例。 http://jsperf.com/downwardtraverseso