jQuery：选择祖父母答案

【问题标题】：jQuery: selecting grandparentsjQuery：选择祖父母
【发布时间】：2011-01-23 02:49:24
【问题描述】：

有没有更好的方法在 jQuery 中选择祖父元素以避免这种情况？

$(this).parent().parent().parent().parent().parent().children(".title, .meta").fadeIn("fast");

谢谢。

【问题讨论】：

那么 children().children().children().children(".title") 呢？
无法抗拒，您可以将 $(this).gparent(2) 与我投反对票的答案中提供的代码一起使用。不知道为什么它被否决，因为它是回答你问题的解决方案......

标签： jquery jquery-selectors

【解决方案1】：

您可以使用parents() 方法将父母与选择器进行匹配

http://api.jquery.com/parents/

或者，如果您使用的是 1.4，则有一个新的 parentsUntil() 方法

http://api.jquery.com/parentsUntil/

【讨论】：

【解决方案2】：

除了parents()，正如他们所说，您还应该check out closest()。阅读那里的文档中的比较，但它的主要区别在于它只搜索一个结果，并且它在搜索的内容中包含$(this)（如果你不够具体，可能会得到你正在搜索的东西）。优点和缺点。

【讨论】：

【解决方案3】：

我写了这个简单的插件，因为我认为我有一个明确的类选择给我错误。对于这种特殊情况，选择祖父母似乎比 $().parents() 更直接。

嗯，我用过一次，然后意识到我实际上有一个拼写错误。不确定它到底有多大帮助。 $('myelem').gparent(2); 让您成为“myelem”的祖父母。

(function( $ ){
$.fn.gparent = function( recursion ){
    if( recursion == undefined ) recursion = 2;
    if(typeof(recursion) == "number"){
        recursion = parseInt( recursion );
        if( recursion > 0 ){
            gparent_holder = $(this);
            for(var gparent_i = 0; gparent_i < recursion; gparent_i++){
                gparent_holder = gparent_holder.parent();
            }
            return gparent_holder;
        }
        else return false;
    }
    else return false;
}
})( jQuery );

【讨论】：

我喜欢这个解决方案。我们进入 jQuery >2.0 并且仍然没有直接、干净的方式来导航“k”级。添加到基础框架中似乎是一件微不足道的事情。
很高兴提出递归。递归函数是解决此类问题的绝佳解决方案……但您的解决方案不是递归的。我发布了一个递归 sn-p 作为这个问题的答案

【解决方案4】：

@Femi 有一个答案，并提到了递归，但他的解决方案不是递归的，这是一个用于获取项目祖先的递归 jQuery 解决方案：

$.fn.gparent = function( recursion ){
   console.log( 'recursion: ' + recursion );
   if( recursion > 1 ) return $(this).parent().gparent( recursion - 1 );
   return $(this).parent();
};

如果这是您的 HTML：

<div id='grandparent'>
  <div id='parent'>
    <div id='child'>
      child
    </div>
  </div>
</div>

你可以打电话

console.log( $('#child').gparent( 2 ) );

获取元素child 的祖父母。 Here's the JSFiddle

【讨论】：

为什么这会在没有评论的情况下被否决...它是递归的，它已记录在案，提供了一个 Fiddle 来显示它的工作原理，它是 OP 问题的答案...所以应该没有解释就不可能投票。现在一个完美的解决方案（我经常使用它！）没有显示为有效的解决方案......
我们可以使用parents().eq(2)而不是添加我们自己的函数来做gparent(2)

【解决方案5】：

使用parents() 选择器获取元素的所有父元素。然后，您可以搜索该集合，如果您想影响所有祖先，也可以对其进行迭代。

【讨论】：

【解决方案6】：

使用parents() 和children() 得到相同的结果。

示例而不是使用这个：

$(this).parent().parent().parent().children(".title").fadeIn("fast");

你可以用这个：

$(this).parents().children(".title").fadeIn("fast");

【讨论】：