jquery - jquery cloning specify input items doesn't work

Question

My goal is there is clone button inside the input section, when i click it clone the whole section including the input value which just inputed via 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>

when I console log inside the function it gives me different stuff from i directly console like

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

I am trying to do is fetch all the input value out and .clone() the whole section then put all the input value inside the new section.

Does anyone come with some better idea? please advise, thank you very much!

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>