jQuery 克隆对象操作

Question

    var data = $('form').clone();

    //data.find('input[type="hidden"]').remove();
    data.find('select').each(function(){
        $($(this).val()).insertAfter($(this));
        $(this).remove();
    });

正在尝试删除 select 下拉菜单并将其替换为克隆对象中的值。上面的代码不起作用，我是不是漏掉了什么明显的东西？

Answer 1

insertAfter 应在对象上调用：

    var $this = $(this);
    $this.insertAfter($this.val());
    $this.remove();

Answer 2

您必须使用 .after() 放置表格的克隆：

var data = $('form').clone();

//data.find('input[type="hidden"]').remove();
data.find('select').each(function() {
  $(this).after(this.value);
  $(this).remove();
});

$(document.body).html(data);

查看下面的工作代码：

var data = $('form').clone();

//data.find('input[type="hidden"]').remove();
data.find('select').each(function() {
  $(this).after(this.value);
  $(this).remove();
});

$(document.body).html(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='#' method='post'>
  <select>
    <option>aaa</option>
  </select>
  <select>
    <option>bbb</option>
  </select>
  <select>
    <option>ccc</option>
  </select>
  <select>
    <option>ddd</option>
  </select>
</form>

jQuery 克隆对象操作

jQuery cloned object manipulation

jquery

html

dom