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克隆指定输入项不起作用

3 个答案: