嘗試將第一個h2標記轉換為h1時出現jQuery [object Object]錯誤

Question

我正在使用一個所有標題都使用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>

但是，當我重新加載頁面時，我得到一個包裝在h1標簽中的[object Object]錯誤。 正如您在上面看到的，我在代碼中添加了一些警報，以便查看變量包含哪些值，而myHeader變量包含[object Object]。 myHeaderHTML變量包含我所期望的。

我怎樣才能解決這個問題？

Answer 1

這是錯誤的：

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

您正在向對象添加字符串，該對象將對象轉換為字符串"[Object object]"並執行串聯。

它應該是：

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

Answer 2

您無需再次調用jquery。

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

Answer 3

通過$(myHeaderHTML)您可以將HTML字符串包裝在jQuery對象中，當與其他字符串（ "<h1>" ）連接時，該對象將被序列化[object Object] 。

采用

$(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>");
});

Answer 4

這是一種可能更安全的方法，不需要將HTML內容放入字符串中：

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