Блог

При нажатии кнопки клонирования поля размера и длины должны быть клонированы и размещены ниже. Важным моментом является то, что я должен иметь возможность видеть этот клонированный код разметки, когда я проверяю исходный код браузера, потому что я отправлю все поля.

HTML

 <style>
    div { display:inline-block; }
    .needles, .yarns, .options { border:1px solid #14A; padding:10px; }
</style>

<div class='needles'>
    <p>NEEDLES</p>
    <div class='options'>
        <div class='label'>Size</div>
        <div class='field'>
            <input id='size-0' name='size-0' value='Size' />
        </div>
    </div>
    <br />
    <div class='options'>
        <div class='label'>Length</div>
        <div class='field'>
            <input id='length-0' name='length-0' value='Length' />
        </div>
    </div>
    <br /><br />
    <button>Clone</button>
</div>

<br />

<div class='yarns'>
    <p>YARNS</p>
    <div class='options'>
        <div class='label'>Size</div>
        <div class='field'>
            <input id='size-0' name='size-0' value='Size' />
        </div>
    </div>
    <br />
    <div class='options'>
        <div class='label'>Length</div>
        <div class='field'>
            <input id='length-0' name='length-0' value='Length' />
        </div>
    </div>
    <br /><br />
    <button>Clone</button>
</div>
 

Я сделал что-то подобное, но, честно говоря, я думаю, что это беспорядок.

  $("button").click(function(event) {
     event.preventDefault();

     var $parent = $(this).closest('div');
     var $length = $parent.prev();
     var $size = $length.prev();

     var size = $size.clone(false).wrap('<p>').parent().html();
     var length = $length.clone(false).wrap('<p>').parent().html();

     var spanId = $(size).children('span').attr('id');
     var idArray = spanId.split("__");
     var currentIdentifierNo = idArray[idArray.length-2];
     var newIdentifierNo = parseInt(currentIdentifierNo) 1;
     var currentIdentifier = '__'   currentIdentifierNo   '__';
     var newIdentifier = '__'   newIdentifierNo   '__';

     var re = new RegExp(currentIdentifier, 'g');
     size = size.replace(re, newIdentifier);
     length = length.replace(re, newIdentifier);

     var html = size   length;
     $(this).before(html);
 });
 

Вы должны изменить name атрибут, чтобы это работало:

 length.find('input').attr('name', 'length-1');
size.find('input').attr('name', 'size-1');
 

Если вы отправляете одни и те же пары ключ / значение в форме, сервер не знает, что есть что.