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

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

HTML:

  1. html
  2. body
  3. div
  4. div /div
  5. /div
  6. ul
  7. li
  8. li
  9. /ul
  10. div
  11. ul
  12. li
  13. li
  14. li hello world
  15. /ul
  16. /div
  17. body
  18. html

这将返回类似的东西

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

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

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

非常感谢!

解决方法

也许是这样的:
  1. function dompath( element )
  2. {
  3. var path = '';
  4. for ( ; element && element.nodeType == 1; element = element.parentNode )
  5. {
  6. var inner = $(element).children().length == 0 ? $(element).text() : '';
  7. var eleSelector = element.tagName.toLowerCase() +
  8. ((inner.length > 0) ? ':contains(\'' + inner + '\')' : '');
  9. path = ' ' + eleSelector + path;
  10. }
  11. return path;
  12. }

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

我用这种方法测试过:

  1. $(document).ready(function(){
  2. $('#p').click(function() {
  3. console.log(dompath(this));
  4. });
  5. });

反对这个:

  1. <html>
  2. <body>
  3. <div>
  4. <div> </div>
  5. </div>
  6. <ul>
  7. <li></li>
  8. <li></li>
  9. </ul>
  10. <div>
  11. <ul>
  12. <li id="p">hi</li>
  13. <li></li>
  14. <li id="p2">hello world</li>
  15. </ul>
  16. </div>
  17. <body>
  18. <html>

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

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

猜你在找的jQuery相关文章