更清潔的方式來編寫element.parent（）。parent（）。parent（）。parent（）。parent（）

Question

如果我需要選擇第10個父級，是否有更簡潔的方法，然后重復.parent（）10次？

$('#element_id').parent().parent().parent().parent().parent().parent().parent().parent().parent().parent();

Answer 1

如果有一個表示你所追求的目標的選擇器，那么使用.closest()或.parents() 。

$('#element_id').closest('.someClass');
$('#element_id').parents('.someClass:first');

...但這兩個都將返回找到的第一個匹配。 正確的解決方案取決於您的實際HTML標記。

（注意.closest()也會計算原始元素，而parents() .closest()第一個祖先開始。）

另請注意，瀏覽器會進行HTML更正。 所以，如果你從里面穿過<table>有沒有<tbody>到外部的元素<table>這樣做的x個.parent()可能會在不同的瀏覽器不同的結果。

Answer 2

以下職位在這里使用這個實現：

jQuery.fn.getParent = function(num) {
    var last = this[0];
    for (var i = 0; i < num; i++) {
        if(!last) break; 
        last = last.parentNode;
    }
    return jQuery(last);
};
// usage:
$('#myElement').getParent(3);

所以你的用法只是：

$('#element_id').getParent(10);

Answer 3

如果你確實需要獲得第10個父級，並且你無法使用選擇器來實現目標，那么最平滑的方式可能是這樣的：

$('#element_id').parents().eq(9);

Answer 4

我用過這段代碼：

var position = $("#test").parents("div").length - 10;
$("#test").closest("div:eq(" + position + ")").append("here!!!");

用那個HTML：

    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div>
                            <div>
                                <div>
                                    <div>
                                        <div>
                                            <div>
                                                <span id="test">here</span>
                                            </div>
                                        </div>      
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

是的，這是11 div。 所以運行代碼應停在第10個div並附加在這里!!!

我確信這段代碼可以更干凈。

無需添加課程。

編輯：我使用了11 DIV，所以你可以看到它不是第一個，它實際上是在10日停止。