获取元素的jQueryselect器

在伪代码中,这是我想要的。

var selector = $(this).cssSelectorAsString(); // Made up method... // selector is now something like: "html>body>ul>li>img[3]" var element = $(selector); 

原因是我需要把它传递给一个外部环境,在那里一个string是我唯一的方式来交换数据。 这个外部环境需要发回一个结果,以及要更新的元素。 所以我需要能够为页面上的每个元素序列化一个唯一的CSSselect器。

我注意到jQuery中有一个selector方法,但它似乎不能在这种情况下工作。 它只有在对象是用select器创build的情况下才有效。 如果使用HTML节点对象创build对象,则不起作用。

我现在看到有一个插件存在(与我想到的同名),但这里只是我写的一些快速的JavaScript。 它不考虑元素的id或类 – 只有结构(并添加:eq(x) ,其中节点名是不明确的)。

 jQuery.fn.getPath = function () { if (this.length != 1) throw 'Requires one element.'; var path, node = this; while (node.length) { var realNode = node[0], name = realNode.localName; if (!name) break; name = name.toLowerCase(); var parent = node.parent(); var siblings = parent.children(name); if (siblings.length > 1) { name += ':eq(' + siblings.index(realNode) + ')'; } path = name + (path ? '>' + path : ''); node = parent; } return path; }; 

TL; DR – 这是一个比看起来更复杂的问题,你应该使用一个库 。


这个问题乍一看似乎很简单,但是看起来比较棘手,就像用普通的URLreplace链接一样简单 。 一些考虑:

  • 使用后代select器与子select器可能会导致select器不唯一的情况 。
  • 使用:eq()限制了解决scheme的实用性,因为它需要 jQuery
  • 使用标签+ nth-childselect器可能会导致不必要的长select器
  • 不利用id使得select器对页面结构的变化不太健壮 。

进一步certificate问题并不像看起来那么容易:有10个以上的库可以生成CSSselect器,其中一个库的作者已经发表了这个比较 。

jQuery-GetPath是一个很好的开始:它会给你这个项目的祖先,像这样:

 var path = $('#foo').getPath(); // eg, "html > body > div#bar > ul#abc.def.ghi > li#foo" 

以下是Blixt在IE中可以使用的答案:

 jQuery.fn.getPath = function () { if (this.length != 1) throw 'Requires one element.'; var path, node = this; while (node.length) { var realNode = node[0]; var name = ( // IE9 and non-IE realNode.localName || // IE <= 8 realNode.tagName || realNode.nodeName ); // on IE8, nodeName is '#document' at the top level, but we don't need that if (!name || name == '#document') break; name = name.toLowerCase(); if (realNode.id) { // As soon as an id is found, there's no need to specify more. return name + '#' + realNode.id + (path ? '>' + path : ''); } else if (realNode.className) { name += '.' + realNode.className.split(/\s+/).join('.'); } var parent = node.parent(), siblings = parent.children(name); if (siblings.length > 1) name += ':eq(' + siblings.index(node) + ')'; path = name + (path ? '>' + path : ''); node = parent; } return path; }; 

我只是想分享我的版本,因为它非常清楚地理解。 我在所有常见的浏览器中testing了这个脚本,并且像老板一样工作。

 jQuery.fn.getPath = function () { var current = $(this); var path = new Array(); var realpath = "BODY"; while ($(current).prop("tagName") != "BODY") { var index = $(current).parent().find($(current).prop("tagName")).index($(current)); var name = $(current).prop("tagName"); var selector = " " + name + ":eq(" + index + ") "; path.push(selector); current = $(current).parent(); } while (path.length != 0) { realpath += path.pop(); } return realpath; } 

像@Blixt那样的解决scheme,但与多个jQuery元素兼容。

jQuery('.some-selector')可以导致一个或多个DOM元素。 @ Blixt的解决scheme不幸的只有第一个。 我的解决scheme将它们连接在一起。

如果你只想处理第一个元素,就像这样做:

 jQuery('.some-selector').first().getPath(); // or jQuery('.some-selector:first').getPath(); 

改良版

 jQuery.fn.extend({ getPath: function() { var pathes = []; this.each(function(index, element) { var path, $node = jQuery(element); while ($node.length) { var realNode = $node.get(0), name = realNode.localName; if (!name) { break; } name = name.toLowerCase(); var parent = $node.parent(); var sameTagSiblings = parent.children(name); if (sameTagSiblings.length > 1) { allSiblings = parent.children(); var index = allSiblings.index(realNode) +1; if (index > 0) { name += ':nth-child(' + index + ')'; } } path = name + (path ? ' > ' + path : ''); $node = parent; } pathes.push(path); }); return pathes.join(','); } }); 

跟随什么亚历克斯写道。 jQuery的GetPath是一个很好的起点,但我已经修改了一点,以合并:eq(),允许我区分多个无id的元素。

在getPath返回行之前添加:

 if (typeof id == 'undefined' && cur != 'body') { allSiblings = $(this).parent().children(cur); var index = allSiblings.index(this);// + 1; //if (index > 0) { cur += ':eq(' + index + ')'; //} } 

这将返回一个像“html> body> ul#hello> li.5:eq(1)”的path

如果你正在寻找一个全面的,非jQuery的解决scheme,那么你应该尝试axe.utils.getSelector 。

 $.fn.getSelector = function(){ var $ele = $(this); return '#' + $ele.parents('[id!=""]').first().attr('id') + ' .' + $ele.attr('class'); };