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个父母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之前在你的标记中追加任何其他的memeber，那么它将按预期工作。

来自文档：

.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 );
    },

Answer 2

这将选择单击元素的第n个（在本例中为第4个）父元素，将eq的输入更改为

0

表示第一个父亲和

99

对于第100个父级，该行的大小将保持不变

$('f').click(function() {
    $(this).parents().eq(3).next().hide();  // "Great-Great-grandfather".
})

选择特定（大）父级

2 个答案:

来自文档：