如何獲取div或其他子元素的標記名？
[英]How to get tagname of child element of a div or any?
問題描述
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="pagehead">
<h1>Sample 1</h1>
<h1>Sample 2</h1>
<p>Thank you</p>
</div>
<button onclick="savetoJSON()">Save</button>
</body>
<script>
var count=$("#pagehead").children().length;
for(i=0;i<count;i++)
{
var ele=$("#pagehead").children()[i];
}
</script>
</html>
我想以字符串格式.prop("tagName");獲取所有子項的標記名。我嘗試了.prop("tagName"); 哪個工作。 除此之外，我想知道如何將[object HTMLHeadingElement]對象轉換為string。
5 個解決方案
解決方案1
1 2017-05-16 10:47:08
element.tagName是必經之路。 但請注意，每次要訪問孩子時遍歷dom都會適得其反：
var children = $("#pagehead").children() children.each(function(index,el){ console.log(el.tagName); })
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div id="pagehead"> <h1>Sample 1</h1> <h1>Sample 2</h1> <p>Thank you</p> </div> <button onclick="savetoJSON()">Save</button> </body> </html>
解決方案2
0 已采納 2017-05-16 10:45:03
使用
Element.tagName屬性，它返回元素的名稱。
var count = $("#pagehead").children().length; for (i = 0; i < count; i++) { var ele = $("#pagehead").children()[i]; console.log(ele.tagName); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="pagehead"> <h1>Sample 1</h1> <h1>Sample 2</h1> <p>Thank you</p> </div>
優化選項：
var pageheadChildren = $("#pagehead").children(); for (var i = 0, len = pageheadChildren.length; i < len; i++) { console.log(pageheadChildren[i].tagName); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="pagehead"> <h1>Sample 1</h1> <h1>Sample 2</h1> <p>Thank you</p> </div>
使用jQuery.prop ：
$("#pagehead").children().each(function() { console.log($(this).prop('tagName')); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div id="pagehead"> <h1>Sample 1</h1> <h1>Sample 2</h1> <p>Thank you</p> </div>
解決方案3
0 2017-05-16 10:47:10
您可以使用.each()遍歷元素並稍微簡化代碼。
$("#pagehead").children().each(function() { console.log($(this).prop('tagName')); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pagehead"> <h1>Sample 1</h1> <h1>Sample 2</h1> <p>Thank you</p> </div>
解決方案4
0 2017-05-16 10:47:37
也許您嘗試$(el)[i].prop('tagName')失敗的$(el)[i].prop('tagName') 。 嘗試僅循環您的元素並列出$(el).prop('tagName')
function savetoJSON() { $("#pagehead > *").each(function() { console.log($(this).prop('tagName')); }); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="pagehead"> <h1>Sample 1</h1> <h1>Sample 2</h1> <p>Thank you</p> </div> <button onclick="savetoJSON()">Save</button>
解決方案5
0 2017-05-16 11:08:21
使用map()生成列表作為數組
var tags = $('#pagehead').children().map(function(){ return this.tagName; }).get().join() console.log(tags);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="pagehead"> <h1>Sample 1</h1> <h1>Sample 2</h1> <p>Thank you</p> </div>
如何在javascript（不僅是tagName）中獲取元素的完整開始標記？
[英]How to get an element's full start tag in javascript (not only tagName)?
如何通過將鼠標懸停在div上來使div滾動（任何方向） <div> ？
[英]How to get a div to scroll (any direction) by hovering on child <div>?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
單擊時獲取任何元素tagName
如何通過標記名訪問元素的子元素的子元素
如何獲得div元素的子元素
通過子元素獲取Div
獲取class中的tagName元素
如何獲取父div元素的子元素
如何在javascript（不僅是tagName）中獲取元素的完整開始標記？
如何通過將鼠標懸停在div上來使div滾動（任何方向） <div> ？
獲取標記名為的孩子<div>僅在 javascript</div><div id="text_translate"><p> 我有一個 HTML 作為：</p><pre> <div id="xyz"> <svg>......</svg> <img>....</img> <div id = "a"> hello </div> <div id = "b"> hello <div id="b1">I ma grand child</div> </div> <div id = "c"> hello </div> </div></pre><p> 我想在 javascript 變量中獲取所有帶有 id = xyz 父元素標簽的子元素。</p><p> 這樣我的 output 應該是：</p><pre> "<div id = "a"> hello </div> <div id = "b"> hello <div id="b1">I ma grand child</div> </div> <div id = "c"> hello </div>"</pre></div>
如何獲取VML對象的tagName？
相關標簽