检索 HTML 标记的完整“签名”

Posted 2023-05-09

【中文标题】检索 HTML 标记的完整“签名”

【英文标题】：Retrieve an HTML tag full 'signature'

【发布时间】：2014-04-02 06:55:41

【问题描述】：

代码如下：

parsedhtml = $("<div id=\"foo\">Content</div>");
console.log(parsedHTML);

当我在 Chrome 中运行它时，在调试器的控制台中我可以看到

[div#foo, jquery: "1.9.1", constructor: function, init: function, selector: "", size: function…]

如何检索第一个参数，它是 HTML 元素的全名/签名？我的意思只是字符串，而不是整个 HTML 代码块？喜欢：

'div#foo'

【问题讨论】：

这只是Chrome devtools提供的便利；它只是隐藏了对其中的 DOM 元素的引用。但是可以在 JS 中复制它。

【参考方案1】：

我假设你想要这样的签名：div#someId.someClass1.someClass2

$.prototype.signature = function()
  return this.prop("tagName").toLowerCase()
   +(this.attr("id") ? "#"+this.attr("id") : "")
   +(this.attr("class") ? "."+this.attr("class").split(/\s+/).join(".") : "");
;
// Div with id="foo" and classes: ["bar", "baz"]
$("#foo").signature();
// "div#foo.bar.baz"

【讨论】：

如果你只想要标签类型和id，删除最后一个连接片段

我真的很希望有一个 JQuery 函数来做到这一点，但你的回答就可以了。谢谢！

已更新以将此扩展名反映为您想要的 $ - 有效吗？