Question

我有一个HTML.RenderPartial页面，可以在多个页面上使用。在大多数页面上，都不需要将其包装在<h1>标签中，但是在一页上，我确实需要将其包装在<h1>标签中。这是我需要用<h1>标签包裹的span标签：

<span class="author-card--title" data-scroll-up-target>About the Author</span>

因此我将这段代码放在需要将<span>标记更改为<h1>标记的页面上：

<script type="text/javascript">
$(document).ready(function() {
    $('#author-card--title').contents().unwrap().wrap('<h1></h1>');
});
</script>

我保存，编译并重新启动了该页面。我可以在页面视图上看到该脚本，但是它没有将<span>标记更改为<h1>。此脚本在此页面上：

@if (Model != null && Model.Count > 0)
{
    <div class="author-landing">
        @if (Model.First().Author != null)
        {
            Html.RenderPartial("~/Views/Articles/Unit/_AuthorCard.cshtml", Model.First().Author);
        }
        @{
            Html.RenderPartial("~/Views/Articles/Unit/_AuthorArticleList.cshtml", Model);
        }
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#author-card--title').contents().unwrap().wrap('<h1></h1>');
        });
    </script>
}
else
{
    <div class="author-landing">
        <h2> Author - <b style="color: green"> Name </b> doesn&#39;t have any article(s) published yet!</h2>                
    </div>
}

我也将脚本移到了if语句中，但仍然无法正常工作。

编辑：我将代码更改为此：

 <script type="text/javascript">
    $("span.author-card--title").wrap("<h1></h1>")
</script>

仍然没有运气。

编辑2：添加了此代码，它起作用了：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $('.author-card--title').wrap('<h1></h1');
</script>

我（很抱歉）认为加载页面已经引用了jquery，但没有引用。设置源代码后，在脚本中进行了较小的调整，就可以了。

谢谢。

Answer 1

根据上面代码中的编辑2，我没有引用jquery源。添加后，它就可以工作。

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $('.author-card--title').wrap('<h1></h1');
</script>

谢谢。

有没有一种方法可以使用内联Javascript将<span>标记与<h1>标记包装在一起

1 个答案: