Клонировать и обновить атрибуты

Question

Мой первый вопрос здесь, но stackoverflow был очень ценным ресурсом для меня в прошлом году.

Я создаю расширенную форму. Мне нужно, чтобы у пользователя была возможность добавлять подгруппы. Я использую jquery (1.5.1 - я полагаю, я должен обновить.), Чтобы клонировать объект. Моя проблема в том, что мне также нужно обновить атрибуты.

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

Я предоставил краткий пример некоторого кода.

<form class="clause">
  <input type="radio" id="radio-1" name="radio" checked="checked" />
    <label for="radio-1">And</label>
  <input type="radio" id="radio-2" name="radio" />
    <label for="radio-2">Or</label>
  <input type="radio" id="radio-3" name="radio" />
    <label for="radio-3">Not</label>
 <button class="ag">Add SubGroup</button>
</form>


<!-- yes, this is in an external file -->
<script type="text/javascript">

$(function() {
  $('.ag').click(function() {
$('.clause').clone(true).insertAfter($('.clause:last'));
 });
</script>

Это очень хорошо дублирует форму и вставляет копию после себя.

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

Существует ли для этого функция? Это не проблема, если их нет, но я стараюсь не изобретать колеса в этом проекте.

РЕДАКТИРОВАТЬ:

Чтобы лучше проиллюстрировать этот вопрос, я предоставил больше кода ниже. Детализация желаемых результатов

<form class="clause">
      <input type="radio" id="radio-1" name="radio" checked="checked" />
        <label for="radio-1">And</label>
      <input type="radio" id="radio-2" name="radio" />
        <label for="radio-2">Or</label>
      <input type="radio" id="radio-3" name="radio" />
        <label for="radio-3">Not</label>
      <button class="ag">Add SubGroup</button>
   </form>
   <form class="clause">
      <input type="radio" id="radio-4" name="radio" checked="checked" />
        <label for="radio-4">And</label>
      <input type="radio" id="radio-5" name="radio" />
        <label for="radio-5">Or</label>
      <input type="radio" id="radio-6" name="radio" />
        <label for="radio-6">Not</label>
      <button class="ag">Add SubGroup</button>
   </form>

   <!-- yes, this is in an external file -->
   <script type="text/javascript">
    $(function() {
      $('.ag').click(function() {
    $('.clause:last').clone(true).insertAfter($('.clause:last'));
     });
    </script>

(примечание: это сильно уменьшенная версия того, что я пытаюсь сделать, и простите меня, если я масштабировал это соответствующим образом.)

Спасибо, Matt

Answer 1

$('.ag').click(function() {
  // I would advise using :last so you don't exponentially grow your form
  var clone = $('.clause:last').clone(true);

  // now find all the radios and reset them
  $('input[type=radio]',clone).removeAttr('checked');

  // now add it
  clone.insertAfter($('.clause:last'));
});

Используйте второй аргумент селектора (Scope) и выполните поиск в своем клоне, чтобы сбросить поля / атрибуты перед его добавлением.