jquery - 选择特定(祖) parent

Question

假设我有以下内容

<a>
  <b>
    <c>
      <d>
        <e>
          <f>
          </f>
        </e>
      </d>
    </c>
  </b>
  <m>
  </m>
</a>

每当单击 f 时，我想隐藏 m。我可以做到这一点

$('f').click(function() {
  $(this).parent().parent().parent().parent().next().hide();
});

但这并不是硬性规定，在 4 个 parent 之后，就会找到 b。但 m 始终位于 b 旁边。

注意:我也不想运行 for 循环来检查 if 元素是否为 b 。我想要纯 Jquery 解决方案。

Answer 1

.closest().siblings() 或 .closest().next() 将是 jQuery 中的助手:

$('f').click(function() {
  // $(this).closest('b').next().hide();
  $(this).closest('b').siblings('m').hide();
});

我猜 .closest().siblings() 会更好，因为如果您在标记中的 m 之前附加任何其他成员，它将按预期工作。

来自文档:

.closest() :对于集合中的每个元素，通过测试元素本身并向上遍历 DOM 树中的祖先来获取与选择器匹配的第一个元素。

.siblings() :获取匹配元素集中每个元素的同级元素，可以选择通过选择器进行过滤。

<小时/>

我也不想运行 for 循环来检查元素是否为 b。

我想提一下 .closest() 方法内部使用 for() 循环来获取匹配的父级。这是closest的来源:

closest: function( selectors, context ) {
        var cur,
            i = 0,
            l = this.length,
            matched = [],
            pos = rneedsContext.test( selectors ) || typeof selectors !== "string" ?
                jQuery( selectors, context || this.context ) :
                0;

        for ( ; i < l; i++ ) {
            for ( cur = this[i]; cur && cur !== context; cur = cur.parentNode ) {
                // Always skip document fragments
                if ( cur.nodeType < 11 && (pos ?
                    pos.index(cur) > -1 :

                    // Don't pass non-elements to Sizzle
                    cur.nodeType === 1 &&
                        jQuery.find.matchesSelector(cur, selectors)) ) {

                    matched.push( cur );
                    break;
                }
            }
        }

        return this.pushStack( matched.length > 1 ? jQuery.unique( matched ) : matched );
    },