在jQuery節點中放置父標籤名稱

我有一個約100個元素的html文件。在我的javascript文件中，我有一個使用jQuery保存html文檔中所有元素的var。然後我有一個var，它保存了html文檔中所有文本節點的元素。我想要做的是爲每個非文本節點創建一個新的子節點並將innerHTML設置爲其父標籤名稱。我會怎麼做呢？在jQuery節點中放置父標籤名稱

//All elements 
var elements = $("*") 

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

來源

2014-11-14 dhint4

爲什麼不'返回this.nodeType！= 3'並處理所有非文本節點？ – BatScream 2014-11-14 22:21:01

爲什麼你需要'textNodes'呢？ – dfsq 2014-11-14 22:21:35

@BatScream如果我要這樣做，我將如何去創建一個新的子節點？我完全是jQuery的新手，所以我不知道很多。 – dhint4 2014-11-14 22:21:56

我可以提出一點點清潔解決方案，它不會污染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>

希望這會爲你工作。

來源

2014-11-14 22:27:06 dfsq

酷解決方案，兄弟！ – 2014-11-14 22:30:21

謝謝你的幫助，但@Vohumans解決方案是我一直在尋找的。 – dhint4 2014-11-14 22:30:56

不知道我完全理解你的問題，但是這需要找到所有不包含文本的節點，並向它們附加一個包含它們節點名稱的節點。

//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) 
    } 
});

來源

2014-11-14 22:29:53 elzi

在jQuery節點中放置父標籤名稱

回答

相關問題