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

Question

使用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级。

Answer 1

如果您热衷于在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);

});

Answer 2

我想第二个@benjamind的回答是，直接在XPath中执行此操作可能有点困难。 但是，我们可能会使用一个小技巧：所需的深度可以计算为img标签到根标签的深度与父标签到根标签的深度之差。 尝试这个：

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

Answer 3

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

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