如何使用xpath计算父元素的子元素的深度

How can I count the depth of a child element from a parent using xpath?

本文关键字：元素 深度 何使用 xpath 计算      更新时间：2023-09-26

使用Selenium，我可以找到子元素和父元素。如何从指定的父对象中获取子对象的深度？

这是HTML 的一个小样本

<div class="header">
    <div></div>
    <div></div>
        <div>
            <ul>
                <li>
                    <img />
                </li>
            </ul>
        </div>
    <div></div>
    <div></div>
</div>

这是我用来查找img标记的父级的xpath。

document.evaluate('../ancestor::div[contains(concat(" ", normalize-space(@class), " "), " header ")]', $('img')[0], null, XPathResult.ANY_UNORDERED_NODE_TYPE, null)

因此，我现在使用xpath来计算父级和子级之间的元素数量。我知道xpath中的count方法，但我对如何实现这一点缺乏经验。结果应该是父级与标记相距5级。

我支持@benjamid的回答，即直接在XPath中执行此操作可能有点困难。但我们可以使用一个小技巧：您要查找的深度可以计算为img标记到根标记的深度与父标记到根标签的深度之间的差。试试这个：

count(ancestor::*) - count(ancestor::div[contains(concat(' ', normalize-space(@class), ' '), ' header ')][1]/ancestor::*)

如果您热衷于用jQuery在javascript中实现这一点，则应该使用以下函数：

       function getDistanceFromElement(src){
            return getDistance(src, 10, 1);
        }
        function getDistance(src, maxDepth, distance){
            if(maxDepth > 0) {
                var parent = $(src).parent();
                if($(parent).hasClass("header")) {
                    return distance + 1;
                } else {
                    return getDistance(parent, maxDepth - 1, distance + 1);
                }
            } else {
                return;
            }
        }

使用以下HTML

<div class="header">
    <div></div>
    <div></div>
        <div>
            <ul>
                <li>
                    <img id="my_image"/>
                </li>
            </ul>
        </div>
    <div></div>
    <div></div>
</div>

，以下呼叫将显示5:

$(document).ready(function() {
    var srcImage = $("#my_image");
    var d = getDistanceFromElement(srcImage);
    alert(d);
});

比benjamin.d的方法简单一点$("#my_image").parentsUntil("div[class='header']").length + 1;

注意，+ 1也用于对<div class="header">进行计数。如果没有它，此函数将返回位于检查元素之间的元素数。

相关文章：