Javascript 和 JQuery - 将输入附加到具有相同类的多个 div

Question

我正在尝试创建一个添加函数，以将一个新的输入添加到具有国内类名称的所有列。

现在我已经在 J​​avaScript 和 Jquery 中创建了一个代码，但它只将它添加到前 6 个，并且这样做了 7 次。

这有可能吗？我搜索了很多帖子，但没有找到任何答案。

HTML

 <!-- START ONJECTIVES CONTAINER -->
    <div class="container" id="weighings">
      <!-- DOMESTIC NAME -->
      <div class="colum" id="columtext">
        <p>Domestic</p>
      </div>
       <!-- COLUM 4 DESCRIPTION -->
      <div class="colum discription domestic" id="regio">
        <p>Description</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 5 LOW -->
      <div class="colum domestic" id="regio">
        <p>Low</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 6 MEDIUM -->
      <div class="colum domestic" id="regio">
        <p>Medium</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 7 HIGH -->
      <div class="colum domestic last" id="regio">
        <p>High</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 8 LOW -->
      <div class="colum domestic" id="regio">
        <p>Low</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 9 MEDIUM -->
      <div class="colum domestic" id="regio">
        <p>Medium</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
      <!-- COLUM 10 HIGH -->
      <div class="colum domestic" id="regio">
        <p>High</p>
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
        <input id="box" type="text" oninput="calculate()" />
      </div>
     </div>
      <!-- END CONTAINER -->

SCSS

    #box{
             margin-top:5px;
             width:10px;
             height:10px;
             background:black;
            }

        .colum{
            display: block;
            width: 200px;
          text-align:center;
        }

    #regio{
      width:50px;
      margin-right:10px;
      input{
        width:50px;
      }
    }

  .row{
    width:100%;
    height:30%;
  }

Javascript 和 Jquery

$(document).ready(function() {
  $('#newrow').click(function() {

    var elements = document.getElementsByClassName('domestic');
    if (elements.length == 0) return false;

    var input = document.createElement('input');
    input.id = 'box';
    input.type = 'text';
    input.oninput = 'calculate()';

      $(".domestic").each(function() {
          $(".domestic").append(input);
      })
  })
});

代码笔:http://codepen.io/salman15/pen/pNELXM?editors=0110

Answer 1

您只创建了一个元素，并附加了该元素，因此它最终位于最后附加的位置。

你必须为循环的每次迭代创建一个元素，你可以使用 append() 和回调来迭代，而不是 each

$(document).ready(function() { 
    $('#newrow').click(function() {
        if ( $('.domestic').length === 0 ) return false;

        $(".domestic").append(function(i) {
            return $('<input />', {
                id   : 'box' + i,
                type : 'text',
                on   : {
                    input : calculate
                }
            });
        });
    });
});