如何使用Javascript或Jquery创建单击元素的Xpath？

Question

I have a webpage where I bind a click event on the element. 我有一个网页，我在该网页上绑定了元素的click事件。 When user clicks on the particular element. 用户单击特定元素时。 I want to get generate the XPath of the element starting from html or body tag. 我想从html或body标签开始生成元素的XPath。 ie "The Absolute Xpath" 即“绝对Xpath”

Suppose in below html sample I click on span having text as "USA" so the Absolute Xpath would be 假设在下面的html示例中，我单击跨度为“ USA”的文本，因此绝对Xpath为

/html[1]/body[1]/div[2]/div[1]/div[1]/span[1]

<html>
    <body>
        <div class="header">Countries</div>
        <div class="row">
            <div class="row_in">
                <div class="row_in_in">
                    <span>India</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="row_in">
                <div class="row_in_in">
                    <span>USA</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="row_in">
                <div class="row_in_in">
                    <span>UK</span>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="row_in">
                <div class="row_in_in">
                    <span>France</span>
                </div>
            </div>
        </div>
    </body>
</html>

Do we have any library where it can help me generate the XPath where I pass the element Dom and it can generate it? 我们是否有任何库可以在其中传递元素Dom并可以生成的XPath来帮助我生成XPath？

I came across few libraries but that help detect the Content inside the html based on provided Xpath. 我遇到了几个库，但这些库可根据提供的Xpath帮助检测html内的内容。

Answer 1

You need to loop through clicked element and it parents to do this work. 您需要遍历clicked元素及其父元素来完成此工作。 So you can call a function nesting to do this work. 因此，您可以调用函数嵌套来完成这项工作。

 var xpath; $("*").click(function(e){ xpath = ''; addXpath($(this)); console.log(xpath); e.stopPropagation(); }); function addXpath($ele){ var tagName = $ele[0].tagName.toLowerCase(); var index = $ele.parent().children(tagName).index($ele)+1; xpath = '/'+tagName +'['+index+']'+ xpath; !$ele.parent().is(document) ? addXpath($ele.parent()) : ""; }

 body {background: green} .header {background: orange} .row_in {background: yellow} .row_in_in {background: blue} span {background: red}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="header">Countries</div> <div class="row"> <div class="row_in"> <div class="row_in_in"> <span>India</span> </div> </div> </div> <div class="row"> <div class="row_in"> <div class="row_in_in"> <span>USA</span> </div> </div> </div> <div class="row"> <div class="row_in"> <div class="row_in_in"> <span>UK</span> </div> </div> </div> <div class="row"> <div class="row_in"> <div class="row_in_in"> <span>France</span> </div> </div> </div>

如何使用Javascript或Jquery创建单击元素的Xpath？

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-11-14 13:15:14

如何使用Javascript或Jquery创建单击元素的Xpath？

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-11-14 13:15:14

解决方案1
2 已采纳 2018-11-14 13:15:14