JQuery клонирование указать элементы ввода не работает - PullRequest
Новая
       39

JQuery клонирование указать элементы ввода не работает

0 голосов
/ 27 июня 2018

Моя цель заключается в том, чтобы внутри секции ввода была кнопка клонирования, когда я щелкаю по ней, клонировать всю секцию, включая входное значение, которое просто вводится с помощью 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 () весь раздел, а затем поместить все входные значения в новый раздел.

Кто-нибудь приходит с лучшей идеей? пожалуйста, посоветуйте, большое спасибо!

Ответы [ 3 ]

0 голосов
/ 27 июня 2018

Либо используйте .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>
0 голосов
/ 27 июня 2018

Расширенный ответ 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>
0 голосов
/ 27 июня 2018

Не используйте зарезервированное слово this в функции как переменную: 

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>
...