[英]Using JavaScript and/or JQuery, how can I find the “XPath” or map to an element?
[英]How to create a Xpath of the clicked element using Javascript or Jquery?
我有一个网页,我在该网页上绑定了元素的click事件。 用户单击特定元素时。 我想从html或body标签开始生成元素的XPath。 即“绝对Xpath”
假设在下面的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>
我们是否有任何库可以在其中传递元素Dom并可以生成的XPath来帮助我生成XPath?
我遇到了几个库,但这些库可根据提供的Xpath帮助检测html内的内容。
您需要遍历clicked元素及其父元素来完成此工作。 因此,您可以调用函数嵌套来完成这项工作。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.