Question

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

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

感谢。

Answer 1

您可以使用与父级匹配选择器的parents()方法

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

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

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

Answer 2

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

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

Answer 4

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

Answer 5

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

child

如果这是您的HTML：

Cmd + Opt + 1

你可以打电话

<dl>

获取元素dl>dt { float: left; width: 150px; overflow: hidden; clear: left; text-align: right; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; } dl>dd { margin-left: 160px; }的祖父母。 Here's the JSFiddle

Answer 6

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

代替此示例：

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

您可以使用：

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

jQuery：选择祖父母

6 个答案: