如何用HTML元素替換jQuery對象？

Question

這是我的代碼：

 $(".do").on("click", function(){ var stuffs_html = "", num = 2; $staffs_container = $(".staffs_container").clone().removeClass("hide_staffs_container"); for ( var i = 0; i < num; i++){ stuffs_html += $staffs_container; } $(".staffs_container").replaceWith(stuffs_html); }) 

 .hide_staffs_container{ display: none; } input{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="staffs_container hide_staffs_container"> <input class="staff_name" type="text" name="name" required placeholder="name" /> <input class="staff_mobile" type="text" name="mobile" required placeholder="mobile" /> <hr /> </div> <input type="button" class="do" value="click" /> 

如您所見，它顯示[object]而不是HTML。 我該如何解決該問題？

Answer 1

使用此loc將每個項目轉換為html

 $staffs_container.html();

然后先清空父div，然后再將子代添加到父div

$(".staffs_container").removeClass("hide_staffs_container").empty().append(stuffs_html);

 $(".do").on("click", function() { var stuffs_html = "", num = 2; $staffs_container = $(".staffs_container").clone(); for (var i = 0; i < num; i++) { stuffs_html += $staffs_container.html(); } console.log(stuffs_html) $(".staffs_container").removeClass("hide_staffs_container").empty().append(stuffs_html); }) 

 .hide_staffs_container { display: none; } input { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="staffs_container hide_staffs_container"> <input class="staff_name" type="text" name="name" required placeholder="name" /> <input class="staff_mobile" type="text" name="mobile" required placeholder="mobile" /> <hr /> </div> <input type="button" class="do" value="click" /> 

Answer 2

$staffs_container[0]包含HTMLElement ，抓住它然后使用.outerHTML獲取HTML字符串

 $(".do").on("click", function(){ var stuffs_html = "", num = 2; $staffs_container = $(".staffs_container") .clone() .removeClass("hide_staffs_container"); for ( var i = 0; i < num; i++){ stuffs_html += $staffs_container[0].outerHTML; } $(".staffs_container").replaceWith(stuffs_html); }) 

 .hide_staffs_container{ display: none; } input{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="staffs_container hide_staffs_container"> <input class="staff_name" type="text" name="name" required placeholder="name" /> <input class="staff_mobile" type="text" name="mobile" required placeholder="mobile" /> <hr /> </div> <input type="button" class="do" value="click" /> 

Answer 3

我已經更新了您的代碼。。我想您期望像這樣。

 $(".do").on("click", function(){
  var stuffs_html = "",
  num         = 2;
  $staffs_container = 
  $(".staffs_container").clone().removeClass("hide_staffs_container"); 
  for ( var i = 0; i < num; i++){
   stuffs_html += $staffs_container.html();
  }  
  $(".staffs_container").replaceWith($staffs_container);
});

http://jsfiddle.net/pf455/769/

Answer 4

元素對象和jQuery集合在轉換為字符串時（在本例中為+= ）不會自動輸出其標記。 但是，您不一定需要將它們作為字符串。

您可以建立元素對象的集合（數組），然后可以立即將其提供給.replaceWith() 。 不過，您將需要創建更多克隆。

 $(".do").on("click", function(){ var stuffs = [], num = 2; var $staffs_container = $(".staffs_container.hide_staffs_container"); for ( var i = 0; i < num; i++){ stuffs.push( $staffs_container.clone().removeClass("hide_staffs_container") ); } $(".staffs_container").replaceWith(stuffs); }) 

 .hide_staffs_container{ display: none; } input{ display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="staffs_container hide_staffs_container"> <input class="staff_name" type="text" name="name" required placeholder="name" /> <input class="staff_mobile" type="text" name="mobile" required placeholder="mobile" /> <hr /> </div> <input type="button" class="do" value="click" />