时间戳

首页 > 解决方案 > 不同div中的重复字段

angular - 不同div中的重复字段

问题描述

我有一个按钮，它的功能是复制底部输入，但它们必须在 2 个不同的 div 中复制，即第一次单击按钮，它在 div 1 中呈现一个新字段，第二次单击，呈现在div 2，第三次单击，在 div 1 中再次呈现，依此类推。

我这样做如下：

  duplicateFields() {
    let currentDiv = document.getElementById('duplicate');
    let clonedDiv = currentDiv.cloneNode(true);
    currentDiv.parentNode.insertBefore(clonedDiv, currentDiv.nextSibling);
  }

第 1 部分

<div fxLayout="row" class="row-qtd-ingredients" id="duplicate">
    <mat-form-field appearance="outline" fxFlex="100%">
      <input matInput placeholder="Qtde">
      <mat-hint fxHide>Hint</mat-hint>
    </mat-form-field>
    <mat-form-field appearance="outline" fxFlex="100%" class="m-l-10">
      <input matInput placeholder="Ingredientes">
      <mat-hint fxHide>Hint</mat-hint>
    </mat-form-field>
</div>

第 2 部分

 <div fxLayout="row" class="row-qtd-ingredients">
     <mat-form-field appearance="outline" fxFlex="100%" ngClass.gt-sm="m-l-10">
       <input matInput placeholder="Qtde">
       <mat-hint fxHide>Hint</mat-hint>
     </mat-form-field>
     <mat-form-field appearance="outline" fxFlex="100%" class="m-l-10">
       <input matInput placeholder="Ingredientes">
       <mat-hint fxHide>Hint</mat-hint>
     </mat-form-field>
</div>

但是，他只在 div 1 上复制它，他希望它在它们之间合并

标签： angular

解决方案

我想你的 HTML 中有这样的东西：

<div id="duplicate"...>...</div>
<div...>...</div>

而不是这样的：

<div id="duplicate"...>...</div><div...>...</div>

请注意，在第二个标记中，两个 div 之间没有空格。如果我在第一次单击时是正确的，则nextSibling应该返回#text（nextSibling）。所以你实际上拥有的 DOM 是这样的：

<div id="duplicate"...>...</div>
#text
<div...>...</div>

在第一次单击时，您将克隆duplicate并将其插入到其第一个兄弟之前，因此您将以 DOM 结束，如下所示：

<div id="duplicate"...>...</div>
<div id="first-clone"...>...</div>
#text
<div...>...</div>

此时firsSibling的duplicatediv 是第一个克隆。因此，在第二次单击时，您将在副本和第一个克隆之间插入第二个克隆。DOM 将如下所示：

<div id="duplicate"...>...</div>
<div id="second-clone"...>...</div>
<div id="first-clone"...>...</div>
#text
<div...>...</div>

依此类推，在每次下一次单击时，克隆将在副本之后和前一个克隆之前进行。

你能做的是得到nextElementSibling而不是nextSibling。请记住nextElementSibling，某些浏览器不完全支持。

推荐阅读