DOM(JavaScript):当父级有兄弟姐妹时,如何获取元素的父级

Question

请看一下这个HTML代码示例:

<div>
    <div></div>
    <div><!-- my target node -->
        <div><!-- not my target node -->
            <img /><!-- my source node -->
        </div>
    </div>
</div>

正如您所看到的,img标签有两个封闭的div.我希望这两个封闭的div中的第一个被认为是img标签的"真正的"父级(我需要找到的),因为它之前有一个兄弟div,所以搜索结束,兄弟div和外部封闭的div是忽略.
我只是想知道如何获取元素之父,就像我用javascript代码解释的那样.
注意:在没有兄弟姐妹的情况下,必须产生外部div; 在元素未被封闭的情况下,元素本身必须被生成.

Answer 1

所以听起来你想要第一个拥有兄弟姐妹元素的祖先.如果是这样,你可以这样做:

var parent = img.parentNode;

while (parent && !parent.previousElementSibling && !parent.nextElementSibling) {
    parent = parent.parentNode;
}

或者更恰当地写成do-while循环:

do {
    var parent = img.parentNode;
} while (parent && !parent.previousElementSibling && !parent.nextElementSibling);

因此,循环将在找到具有至少一个兄弟元素的循环时,或者当它用完祖先时结束.

如果您知道兄弟姐妹是在父母之前还是之后,您可以只测试一个或另一个.

另请注意,***ElementSibling如果您支持旧版浏览器,则需要使用垫片.

你可以创建一个可以执行此操作的函数:

function prevElement(el) {
    while ((el = el.previousSibling) && el.nodeType !== 1) {
        // nothing needed here
    }

    return el;
}

function nextElement(el) {
    while ((el = el.nextSibling) && el.nodeType !== 1) {
        // nothing needed here
    }

    return el;
}

然后使用这样的函数:

do {
    var parent = img.parentNode;
} while (parent && !prevElement(parent) && !nextElement(parent));