jquery 克隆指定输入项不起作用

Question

我的目标是在输入部分中有一个克隆按钮，当我单击它时克隆整个部分，包括刚刚通过 jquery 输入的输入值。

<section class='sectionContent'>
<button onClick="clone_section(this)"></button>
<input type="text" name="someinput">
<input type="text" name="someinput">
<input type="text" name="someinput">
<input type="text" name="someinput">
<input type="text" name="someinput">
<input type="text" name="someinput">

<script type="text/javascript">
    function clone_section(this) {
        console.log($(this).find("input"));
    }
</script>

当我在函数内部进行控制台登录时，它给了我不同于我直接控制台的东西，比如

console.log('.sectionContent').find('input');

我想做的是取出所有输入值并 .clone() 整个部分，然后将所有输入值放入新部分。

有没有人有更好的主意？请指教，非常感谢！

Answer 1

不要在函数中使用保留字 this 作为 var：

function clone_section(theChosen) {
  console.log($(theChosen).find("input"));
}

但是按钮没有输入 - 你可能是说

$(".sectionContent>button").on("click", function(e) {
  e.preventDefault(); // or have type="button"
  console.log($(this).closest("section").find("input"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<section class='sectionContent'>
  <button>Click</button><br/>
  <input type="text" name="someinput"><br/>
  <input type="text" name="someinput"><br/>
  <input type="text" name="someinput"><br/>
  <input type="text" name="someinput"><br/>
  <input type="text" name="someinput"><br/>
  <input type="text" name="someinput"><br/>
</section>

Answer 2

使用 .nextAll("input") 或 $(obj).parent().find("input")

请注意 this 是保留字，因此请使用以下内容：

function clone_section(obj) {
  console.log($(obj).nextAll("input"));
}

演示

function clone_section(obj) {
  console.log($(obj).nextAll("input"));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='sectionContent'>
  <button onClick="clone_section(this)"></button>
  <input type="text" name="someinput">
  <input type="text" name="someinput">
  <input type="text" name="someinput">
  <input type="text" name="someinput">
  <input type="text" name="someinput">
  <input type="text" name="someinput">
</section>

Answer 3

稍微扩展了 mplungjan 的答案。

$(".sectionContent>button").on("click", function(e) {
  e.preventDefault(); // or have type="button"
  $(this).closest("section").find( 'input' ).clone().appendTo( $('.clonesHere') );
  $('<hr>').appendTo( $('.clonesHere') ); // just for visuals
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<section class='sectionContent'>
  <button>Click</button><br/>
  <input type="text" name="someinput"><br/>
  <input type="text" name="someinput"><br/>
  <input type="text" name="someinput"><br/>
  <input type="text" name="someinput"><br/>
  <input type="text" name="someinput"><br/>
  <input type="text" name="someinput"><br/>
</section>

Clones here:
<section class='clonesHere'></section>

jquery 克隆指定输入项不起作用

jquery cloning specify input items doesn't work

jquery

jquery-clone