更清洁的方式来编写element.parent（）。parent（）。parent（）。parent（）。parent（）

Question

如果我需要选择第10个父级，是否有更简洁的方法，然后重复.parent（）10次？

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

Answer 1

If there's a selector that represents the target you're after, then use .closest() or .parents() .

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

...but both of these will return the first match found. The proper solution will depend on your actual HTML markup.

(Note that .closest() also evaluates the original element, while parents() starts with the first ancestor.)

Also keep in mind that browsers make HTML corrections. So if you're traversing from inside a <table> that has no <tbody> to an element outside the <table> , doing x number of .parent() may give different results in different browsers.

Answer 2

The following post here uses this implementation:

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

so your usage would simply be:

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

Answer 3

如果你确实需要获得第10个父级，并且你无法使用选择器来实现目标，那么最平滑的方式可能是这样的：

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

Answer 4

I've used this code:

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

with that 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>

Yes that is 11 div. so running the code should stop at the 10th div and append here!!!

I'm sure this code could be even more clean.

No need to add class.

Edit: I used 11 DIV so you can see it's not going to the very first one, it actually stop at the 10th.