javascript - 另一个最接近的子线程 : finding the nearest ancestor of an element that matches a selector

Question

这是 HTML 模块的概要:

.module
  .module-title
  .module-foo
    .module-bar
  .module-children

模块可以相互嵌套:

.module
  .module-title
  .module-foo
    .module-bar
  .module-children
    .module
      .module-title
      .module-foo
        .module-bar
      .module-children
        .module
          .module-title
          .module-foo
            .module-bar
          .module-children
        .module
          .module-title
          .module-foo
            .module-bar
          .module-children
  .module
    .module-title
    .module-foo
      .module-bar
    .module-children

我已经将最顶层的 .module 存储在一个 jQuery 对象 $module 中。

现在，我想选择属于最顶层模块的 .module-bar，不包括属于嵌套模块的那些。

问题是我不想硬编码层次结构。

E. G。我可以这样做:

$bar = $module.find('> .module-foo > .module-bar');

或者这个:

$bar = $module.find('.module-bar').eq(0);

但是模块内容的结构可能会有细微的变化。子元素可能以不同的顺序出现，或者以不同的方式嵌套。这些 HTML 更改中的任何一个都会破坏 JS 代码，我希望代码灵活并且能够容忍 HTML 结构的微小更改。

相反，我想做类似的事情:

$bar = $module.closestChild('.module-bar');

我发现了很多问题和解决方案都可以描述为“反向closest()”。这是一个例子:https://github.com/jstnjns/jquery-nearest/但它不适合我，因为它只会阻止遍历目标实例内部。在我的例子中，目标元素不包含嵌套模块，因此 nearest() 将选择 .module-bar 的所有实例。

其他解决方案就是无法满足要求。比如这个https://stackoverflow.com/a/7051985/901944依赖于 .first()。

Answer 1

你可以过滤 parent

var $bars = $module.find('.module-bar').filter(function() {
                return $(this).closest('.module').get(0) === $module.get(0);
            });

这排除了任何 .module-bar 嵌套 depper 而不是一个 .module

FIDDLE

或者(在内部做和上面一样的事情，所以可能效率不高)

 var $bars = $module.find('.module-bar').not('.module .module .module-bar');

FIDDLE