如何获取jQuery中元素的第n级父级?

2020/11/09 14:42 · javascript ·  · 0评论

例如,当我想获取元素的三级父级时,$('#element').parent().parent().parent()是否需要为此编写更好的方法?

由于parents()返回从最接近外部元素开始排序的祖先元素,因此可以将其链接到eq()

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".

根据您的需要,如果您知道要寻找的父母,可以使用.parents()选择器。

EG:http
//jsfiddle.net/HenryGarle/Kyp5g/2/

<div id="One">
    <div id="Two">
        <div id="Three">
            <div id="Four">

            </div>
        </div>
    </div>
</div>


var top = $("#Four").parents("#One");

alert($(top).html());

使用索引的示例:

//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);

alert($(topTwo ).html());

你可以给目标父母一个ID或类(例如myParent),引用是 $('#element').parents(".myParent")

一种更快的方法是直接使用javascript,例如。

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

与链接jQuery.parent()调用相比,此方法在我的浏览器上的运行速度明显更快

请参阅:http//jsperf.com/jquery-get-3rd-level-parent

找不到使用closest()
的答案,当您不知道所需元素的层次数时,我认为这是最简单的答案,因此发布答案:


您可以将
closest()函数与选择器结合使用以获取第一个匹配的元素从元素向上遍历时:

('#element').closest('div')    // returns the innermost 'div' in its parents
('#element').closest('.container')    // returns innermost element with 'container' class among parents
('#element').closest('#foo')    // returns the closest parent with id 'foo'

这很简单。只需使用

$(selector).parents().eq(0); 

其中0是父级(0是父级,1是父级的父级,依此类推)

只需添加:eq()选择器,如下所示:

$("#element").parents(":eq(2)")

您只需指定哪个父级的索引:0表示直接父级,1表示祖父母,...

如果您打算重用此功能,则最佳解决方案是制作一个jQuery插件:

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

当然,您可能需要扩展它以允许使用可选的选择器和其他类似的东西。

请注意:这0为父母使用了基础索引,因此nthParent(0)与call相同parent()如果您希望1基于索引,请使用n-- > 0

如果您有一个共同的父div,则可以使用parentUntil()链接

例如: $('#element').parentsUntil('.commonClass')

优点是您无需记住该元素和公共父级(由commonclass定义)之间有多少代。

您还可以使用:

$(this).ancestors().eq(n) 

例如:$(this).ancestors().eq(2)->的父母this

您可以使用如下形式:

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

使用eq似乎可以获取动态DOM,而使用.parent()。parent()似乎可以获取最初加载的DOM(如果可能的话)。

我在一个将类应用于onmouseover的元素上都使用了它们。eq显示类,而.parent()。parent()不显示。

parents()返回一个列表时,这也有效

$('#element').parents()[3];
本文地址:http://javascript.askforanswer.com/ruhehuoqujqueryzhongyuansudedinjifuji.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!