jQuery：选择祖先级元素

Question

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

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

谢谢。

- aneuryzm

---

那么 children().children().children().children(".title") 呢？ - aneuryzm

无法抵制，您可以在我被踩的答案中提供的代码中使用$(this).gparent(2)。不知道为什么会被踩，因为它是回答您问题的解决方案... - patrick

Answer 1

你可以使用parents()方法来匹配父元素与选择器相符的元素。

如果你使用1.4版本，还有一个新的parentsUntil()方法。 http://api.jquery.com/parents/ http://api.jquery.com/parentsUntil/

- Neil Aitken

Answer 2

除了他们所说的parents()之外，你还应该查看closest()。在那里阅读文档中的比较，但它的主要区别是它仅搜索一个结果，并且它将$(this)包含在其搜索范围内（如果你不够具体，可能会得到你正在搜索的东西）。优缺点。

- user241244

Answer 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 );

- Femi

---

我喜欢这个解决方案。我们使用的是jQuery > 2.0，但仍然没有直接、清晰的方法来导航“k”个级别。似乎将其添加到基础框架中是一件微不足道的事情。 - Evan Steinkerchner

很高兴提到递归。递归函数是解决这类问题的好方法...但是你的解决方案不是递归的。我在回答这个问题时发布了一个递归片段。 - patrick

Answer 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 的祖先元素。 这是 JSFiddle

- patrick

---

为什么这个回答没有评论就被踩了呢？它是递归的，有文档支持并提供了一个演示，而且回答了问者的问题。Stack Overflow应该禁止匿名踩带有理由解释。现在一个完美可行的解决方案（我经常使用）却不显示为有效的解决方案了。 - patrick

我们可以使用parents().eq(2)来代替添加自己的函数来执行gparent(2)。 - Stéphane Bruckert

Answer 5

使用parents()选择器获取元素的所有父级。然后，您可以搜索集合，或者如果要影响所有祖先，则可以迭代该集合。

- Traveling Tech Guy

Answer 6

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

例如，不要使用以下代码：

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

你可以使用这个：

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

- NJENGAH

Answer 7

基本示例

<div id="europe">
   <div>
       <span id="denmark">Minimum Stok</span> 
   </div>
</div>

$('span#denmark').parents("div#europe").attr('class', 'place')

结果;

<div id="europe" class="place">
   <div>
       <span id="denmark">Minimum Stok</span> 
   </div>
</div>

- Melisa