jQuery [object object]在尝试将第一个h2标签转换为h1时出现错误

jQuery [object Object] error when trying to convert first h2 tag to an h1

本文关键字:object h1 转换 错误 标签 第一个 jQuery h2      更新时间:2023-09-26

我正在使用一个网页,所有的标题使用h2标签。我想转换第一个标题,使它使用h1。

这是我使用的代码:

<script type="text/javascript">
var myHeader = $('h2:first');
var myHeaderHTML = myHeader.html();
alert("myHeader: " + myHeader);
alert("myHeaderHTML: " + myHeaderHTML);
$(document).ready(function() {
$(myHeader).replaceWith("<h1>" + $(myHeaderHTML) + "</h1>");
});
</script>

然而,当我重新加载页面时,我得到一个[object object]错误包装在h1标签中。正如你在上面看到的,我在代码中放了几个警告,这样我就可以看到变量包含的值,它是myHeader变量,它包含[object object]。myHeaderHTML变量包含我所期望的内容。

我该如何解决这个问题?

这是错误的:

"<h1>" + $(myHeaderHTML) + "</h1>"

您正在向对象添加字符串,该对象将对象转换为字符串"[Object object]"并执行连接。

应该是:

 "<h1>" + myHeaderHTML + "</h1>"

你不需要再调用jquery了

$(myHeader).replaceWith("<h1>" + myHeaderHTML + "</h1>");

通过$(myHeaderHTML)你包装HTML字符串在一个jQuery对象,这将是序列化[object Object]时,与其他字符串("<h1>")。

使用

$(document).ready(function() {
    var myHeader = $('h2:first');
    var myHeaderHTML = myHeader.html();
    alert("myHeader: " + myHeader); // alerts [object Object] as well
    alert("myHeaderHTML: " + myHeaderHTML);
    myHeader.replaceWith("<h1>" + myHeaderHTML + "</h1>");
});

这里有一种可能更安全的方法,不需要将HTML内容放入字符串中:

<script type="text/javascript">
  $(function(){
    $('h2:first').wrapInner('<h1>').find('h1').unwrap();
  });
</script>