Question

我正在尝试创建一个add函数，为类名为domestic的所有列添加一个新的输入。

现在我已经用JavaScript创建了一个代码。 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＆amp; 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);
      })
  })
});

Codepen：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
                }
            });
        });
    });
});

Answer 2

$（＆＃39; .domestic＆＃39;）是一个独立的数组;你不需要.each功能。只需使用

$(".domestic").append(input);

那应该给你一个新的行，每个div附加一个新的输入，使用class＆＃34; domestic＆＃34;。

Answer 3

将float radius = Vel / AngularVel选择器上的功能更改为

.domestic

Javascript＆amp; JQuery - 将输入附加到具有相同类的多个div中

3 个答案: