Javascript和JQuery - 将输入追加到同一类的多个div

问题描述：

我试图创建一个添加函数来添加一个新的输入到所有与国内类名的列。Javascript和JQuery - 将输入追加到同一类的多个div

现在我已经在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 & 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

答

你只创建一个单一的元素，并追加该元素，所以它结束了它被追加的最后一个地方。

你必须为每个循环迭代创建一个元素，你可以使用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 
       } 
      }); 
     }); 
    }); 
});

你是我的英雄T.T – Salman

@Notorious_Creed - 不客气。很可能你不需要'if'条件，因为如果没有匹配的元素它不会追加任何东西。 – adeneo

如果我再问你一个问题，你介意吗？ – Salman

答

更改您的.domestic选择功能

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

答

$（'。domestic'）是一个自己的数组;你不需要.each函数。只需使用

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

这应该给你追加到类“国产”每格一个新的输入一个新行。

Javascript和JQuery - 将输入追加到同一类的多个div

相关推荐