jquery – 获取选择器的元素路径

前端之家收集整理的这篇文章主要介绍了jquery – 获取选择器的元素路径前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
遇到麻烦,基本上试图创建一个可以用作选择器的变量.例如
$('a').click(function(){
   var selector = $(this).dompath();
});

HTML:

html
    body
        div
            div /div
        /div
       ul
         li
         li
       /ul
    div
        ul
           li
           li
           li hello world
        /ul
   /div
   body
html

这将返回类似的东西

path = html body div ul li:contains('hello world')

然后我可以在选择器中使用它来选择这个div,所以如果我喜欢

$(path).text() would return "hello world"

非常感谢!

解决方法

也许是这样的:
function dompath( element )
{
    var path = '';
    for ( ; element && element.nodeType == 1; element = element.parentNode )
    {
        var inner = $(element).children().length == 0 ? $(element).text() : '';
        var eleSelector = element.tagName.toLowerCase() + 
           ((inner.length > 0) ? ':contains(\'' + inner + '\')' : '');
        path = ' ' + eleSelector + path;
    }
    return path;
}

修改了另一个问题的方法,只有当标签没有子标签时才通过:contains()运算符添加标签的全文内容.

我用这种方法测试过:

$(document).ready(function(){
    $('#p').click(function() {
      console.log(dompath(this));
    });
});

反对这个:

<html>
    <body>
        <div>
            <div> </div>
        </div>
       <ul>
         <li></li>
         <li></li>
       </ul>
       <div>
         <ul>
           <li id="p">hi</li>
           <li></li>
           <li id="p2">hello world</li>
        </ul>
       </div>
   <body>
<html>

单击p的结果然后输出为:

html body div ul li:contains(‘hi’)

原文链接:https://www.f2er.com/jquery/180985.html

猜你在找的jQuery相关文章