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，然后将子项附加到它

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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" />

＆＃13;

Answer 2

[assembly: ExportRenderer(typeof(App45.MyWebView), typeof(MyWebViewRenderer))] namespace App45.Droid { public class MyWebViewRenderer : WebViewRenderer { Activity mContext; public MyWebViewRenderer(Context context) : base(context) { this.mContext = context as Activity; } protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.WebView> e) { base.OnElementChanged(e); Control.Settings.JavaScriptEnabled = true; Control.ClearCache(true); Control.SetWebChromeClient(new MyWebClient(mContext)); } public class MyWebClient : WebChromeClient { Activity mContext; public MyWebClient(Activity context) { this.mContext = context; } [TargetApi(Value = 21)] public override void OnPermissionRequest(PermissionRequest request) { mContext.RunOnUiThread(() => { request.Grant(request.GetResources()); }); } } } }包含$staffs_container[0]，抓住它然后使用HTMLElement获取HTML字符串

＆＃13;

.outerHTML

＆＃13;

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

＆＃13;

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

＆＃13;

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" />

如何用HTML元素替换jQuery对象？

4 个答案: