CODEWITHSUNDEEP
javascriptjquery
Bharadwaj
Bharadwaj

Reputation: 11

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>

I would like to get the tagname of all children one by one in a string format.I tried .prop("tagName"); which dint work. In addition to this I would like to know how to convert [object HTMLHeadingElement] object to string .

Upvotes: 0

Views: 381

Answers (5)

charlietfl
charlietfl

Reputation: 171690

Use map() to generate your list as array

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>

Upvotes: 0

Rayon
Rayon

Reputation: 36609

Use Element.tagName property, it returns the name of the element.

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>

Optimized option:

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>

Using 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>

Upvotes: 0

Justinas
Justinas

Reputation: 43507

Maybe you tried $(el)[i].prop('tagName') that will fail. Try just looping your elements and list $(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>

Upvotes: 0

Turnip
Turnip

Reputation: 36702

You can use .each() to loop through the elements and simplify your code a little.

$("#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>

Upvotes: 0

n00dl3
n00dl3

Reputation: 21564

element.tagName is the way to go. but note that traversing the dom each time you want to access the child is counter-productive :

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>

Upvotes: 1

Related Questions