Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Увеличить индекс при клонирование группы данных? (https://javascript.ru/forum/dom-window/67998-uvelichit-indeks-pri-klonirovanie-gruppy-dannykh.html)

nik_neman 19.03.2017 18:42

Увеличить индекс при клонирование группы данных?
 
Здравствуйте.
Поля которые необходимо клонировать вот в таком виде:
<input type="text" name="group[0][title]" id="title">
<input type="text" name="group[0][description]" id="description">
<input type="text" name="group[0][summary]" id="summary">


Подскажите пожалуйста как сделать чтобы при клонировании индекс в названии поля увеличивался и получалось таким образом.

<input type="text" name="group[1][title]" id="title">
<input type="text" name="group[1][description]" id="description">
<input type="text" name="group[1][summary]" id="summary">

<input type="text" name="group[2][title]" id="title">
<input type="text" name="group[2][description]" id="description">
<input type="text" name="group[2][summary]" id="summary">


Заранее спасибо.

рони 19.03.2017 18:50

nik_neman,
где код клонирования? id одинаковое?

nik_neman 20.03.2017 00:07

$('.add').click(function(e){
        e.preventDefault();
        var lastRepeatingGroup = $('.repeating').last();
        var cloned = lastRepeatingGroup.clone(true)  
        cloned.insertAfter(lastRepeatingGroup);
    });

id как в примере в первом сообщении

рони 20.03.2017 00:45

nik_neman,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
var num = 0;
$('.add').click(function(e){
        e.preventDefault();
        var lastRepeatingGroup = $('.repeating').last();
        var cloned = lastRepeatingGroup.clone(true);
        var html = cloned.html().replace(/\d+/g, ++num);
        cloned.html(html).insertAfter(lastRepeatingGroup);
    });


});
  </script>
</head>

<body>
<input name="" type="button" value="add" class="add">
<div class="repeating">
<input type="text" name="group[0][title]" id="title">
<input type="text" name="group[0][description]" id="description">
<input type="text" name="group[0][summary]" id="summary">
</div>

</body>
</html>

nik_neman 20.03.2017 01:02

Спасибо! Сработало!


Часовой пояс GMT +3, время: 14:08.