Zalu Zalu - 1 month ago 10
Javascript Question

How can I do multiple h1 elements replace to h1,h2,h3,h4,h5,h6 in javascript?

@foreach (var item in Model)
{
<div class="panel-heading">
<h1>
<a href="#">@item.Title</a>
</h1>
</div>
}


Result; (Post per page: 6)

<div class="panel-heading">
<h1>
<a href="#">@item.Title</a>
</h1>
</div>


...

<div class="panel-heading">
<h1>
<a href="#">@item.Title</a>
</h1>
</div>


six h1 elements

How can I replace all h1 elements to h1,h2,h3,h4,h5,h6 in javascript ?

Like this:

<div class="panel-heading">
<h1>
<a href="#">@item.Title</a>
</h1>
</div>

<div class="panel-heading">
<h2>
<a href="#">@item.Title</a>
</h2>
</div>
<div class="panel-heading">
<h3>
<a href="#">@item.Title</a>
</h3>
</div>
<div class="panel-heading">
<h4>
<a href="#">@item.Title</a>
</h4>
</div>

<div class="panel-heading">
<h5>
<a href="#">@item.Title</a>
</h5>
</div>

<div class="panel-heading">
<h6>
<a href="#">@item.Title</a>
</h6>
</div>

Answer

You could try something like this (it isn't pretty, but it works). Also here's the jsfiddle.

var count = 1;
$(".panel-heading > h1").each(function() {
  $(this).replaceWith($("<h" + count + ">" + this.innerHTML + "</h" + count + ">"));
  count++;
})