在jquery中克隆对象

时间:2018-01-10 20:47:22

标签: javascript jquery

单击按钮+ Добавить место работы+ Добавить учебное заведение时,应复制此对象并显示以供输入信息。 1单击= 1克隆。但我得到了很多克隆。我错了什么? http://test.bikstart.ru/niz-vac/index2.html



$('.add-study').on('click', function() {
  $('.table-vac--study').clone([true]).appendTo(".form__item__study");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form__item form__item__study">
  <div class="form__item__wrap">
    <img src="img/numer-quest.png" alt="">
    <!--<span>1</span>-->
    <div class="form__wrap">
      <h2 class="h2-quest">Образование</h2>
      <span>Укажите учебные заведения, в которых Вы учились или учитесь</span>
    </div>
  </div>

  <table class='table-vac table-vac--study table-vac-none'>
    <tr class='tr-vac'>
      <td class='td-vac quest-title'>Учебное заведение</td>
      <td class='td-vac'><input type="text" placeholder="Учебное заведение" required id="study"></td>
    </tr>

    <tr class='tr-vac'>
      <td class='td-vac quest-title'><span class='star'>*</span> Специальность</td>
      <td class='td-vac'><input type="text" placeholder="Специальность" required id="specialty"></td>
    </tr>

    <tr class='tr-vac'>
      <td class='td-vac quest-title'><span class='star'>*</span> Год окончания</td>
      <td class='td-vac'><input type="number" required id="year-ending"></td>
    </tr>

    <tr class='tr-vac'>
      <td></td>
      <td class="add-study">+ Добавить учебное заведение</td>
    </tr>
  </table>


  <div class="pseudo-table">
    <div class="pseudo-table__item">
      <pseudo-table-title>Учебное заведение</pseudo-table-title>
      <input type="text" placeholder="Учебное заведение" required id="study1">
    </div>

    <div class="pseudo-table__item">
      <pseudo-table-title><span class='star'>*</span> Специальность</pseudo-table-title>
      <input type="text" placeholder="Специальность" required id="specialty1">
    </div>

    <div class="pseudo-table__item">
      <pseudo-table-title><span class='star'>*</span> Год окончания</pseudo-table-title>
      <input type="number" required id="year-ending1">
    </div>
  </div>

  <!--<span class="add-study">+ Добавить учебное заведение</span>-->
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您的问题是,在将第一个克隆添加到DOM后,您有多个具有类table-vac--study的元素:

$('.table-vac--study')  //this gets all elements with the class

如果您只想要一个具有该类的元素,则需要指定所需类中的哪个元素。

如果你想要与类table-vac--study最接近的元素,你可以使用DOM遍历:

$(this).closest('.table-vac--study').clone([true]).appendTo(".form__item__study");

如果你总是想要第一个元素与类:

$('.table-vac--study:first').clone([true]).appendTo(".form__item__study");