12

请看下面的片段：

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

如您所见，img-elment 有两个封闭div的 s。我希望将这两个封闭divs 中的第一个视为 -elment 的“真正”父级（我需要找到的那个），img因为它div之前有一个兄弟，因此搜索结束并且兄弟div和外部封闭div被忽略。

如果根本没有兄弟姐妹，则必须让出外部div；在元素没有被包围的情况下，元素本身必须被让出。

正如我通过 JavaScript 解释的那样，我只想知道如何定位元素。

4

3 回答 3

21

所以听起来你想要第一个具有兄弟元素的祖先。如果是这样，您可以这样做：

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另请注意，如果您支持旧版浏览器，则需要为属性添加 shim 。

您可以创建一个函数来执行此操作：

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));
于 2012-10-12T17:52:13.623 回答
0

如果您不知道父元素的层数，则很难使用element.getParent单独的方法来选择它。但是，您可以遍历父节点，直到您正在查看的节点具有兄弟姐妹并且是body元素的子节点。假设您的img标签由imgNode.

function getParentWithSiblings(imgNode) {
    for( ; n; n = imgNode.parentNode) {
        if (n.nextSibling && n.parentNode.tagName == 'body') {
            return n;
       }
    }
}

在上面的代码中，我们逐步遍历图像节点的父节点。在每次迭代中，我们检查当前节点（节点的某个父img节点）是否有兄弟节点并且是body标签的子节点。

于 2012-10-12T18:04:41.473 回答
0

以防万一您好奇，这里是您如何使用jQuery实现user1689607 的答案。

function getAncestorWithSiblings(element) {
  var ancestor = element.parent();
  while (ancestor && ancestor.siblings().length === 0) {
    ancestor = ancestor.parent();
  }
  return ancestor;
}

将这个库用于您的目的是否有意义取决于我们没有的大量上下文。正如其他人正确指出的那样，您不需要 jQuery 来解决这个问题，它可能是一个不必要的重量级解决方案。也就是说，它可能是一个非常有用的库，如果您不知道或尚未研究过它，它当然值得您考虑。

于 2012-10-12T18:34:48.617 回答