将父标签名称放在 jQuery 节点中

Placing parent tag name in jQuery nodes

本文关键字：jQuery 节点 标签名      更新时间：2023-09-26

>我有一个大约100个元素的html文件。在我的javascript文件中，我有一个var，它使用jQuery保存html文档中的所有元素。然后，我有一个 var 来保存 html 文档中作为文本节点的所有元素。我想做的是为每个非文本节点创建一个新的子节点，并将 innerHTML 设置为其父标记名称。我该怎么做呢？

//All elements
var elements = $("*")
//Text Nodes only
var textNodes = elements.contents().filter(function() {
    return this.nodeType == 3;
});

我可以提出一个更干净的解决方案，它不会用额外的元素污染 DOM 树（可以选择器可以有很多针对*元素）。为什么不使用一些CSS来使用伪元素:after标签名称？

首先为每个元素设置实际的标签名称，然后使用此 CSS 显示它们：

$("*").attr('data-tag', function() {
    return this.tagName;
});
*:after {
    content: attr(data-tag);
    font-size: 10px;
    color: #AAA;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Test content</div>

希望这对你有用。

不确定我是否完全理解您的问题，但这需要找到所有不包含文本的节点，并在其中包含其节点名称的节点上附加一个。

//All elements
var elements = $("*")
//Text Nodes only
var nodes = elements.contents().filter(function (i) {
    if ( this.nodeType !== 3 ) {
      var el = document.createElement('div');
          el.innerHTML = this.nodeName;
      this.appendChild(el)
    }
});
相关文章：