Question

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

结果; （每页发布：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>

六个h1元素

如何在javascript中将所有h1元素替换为h1，h2，h3，h4，h5，h6？

像这样：

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

你可以尝试这样的东西（它不漂亮，但它有效）。这里也是jsfiddle。

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

Answer 2

您可以编写一个jQuery选择器来获取所有这些h1标记，并循环遍历它们并生成h1到h6标记并使用replaceWith将h1替换为新标记。

以下代码将执行h1到h6。如果有超过6个h1标签，它会将它们放在h6之后的p标签中。

$(function(){

  $(".panel-heading").find("h1").each(function(a,b){
      var newTag='<p'+(a+1)+' \>';
      if(a<=5)
      {
         newTag='<h'+(a+1)+' \>';
      }        
      var content=$(b).html();      
      var s=$(newTag).append(content);
      $(b).replaceWith(s)
  });

});

Here是一个有效的js bin

Answer 3

你可以做这样的服务器端：

@for (var i = 0; i < Model.Length; i++)
{
    <div class="panel-heading">
        <h@(i)>
            <a href="#">@Model[i].Title</a>
        </h@(i)>
    </div>
}

如何在javascript中将多个h1元素替换为h1，h2，h3，h4，h5，h6？

3 个答案: