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

來源

2016-11-18 Salman

你只創建一個單一的元素，並追加該元素，所以它結束了它被追加的最後一個地方。

你必須爲每個循環迭代創建一個元素，你可以使用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 
       } 
      }); 
     }); 
    }); 
});

來源

2016-11-18 22:53:07 adeneo

你是我的英雄T.T – Salman

@Notorious_Creed - 不客氣。很可能你不需要'if'條件，因爲如果沒有匹配的元素它不會追加任何東西。 – adeneo

如果我再問你一個問題，你介意嗎？ – Salman

更改您的.domestic選擇功能

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

來源

2016-11-18 22:55:25 Mariusz

$（'。domestic'）是一個自己的數組;你不需要.each函數。只需使用

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

這應該給你追加到類「國產」每格一個新的輸入一個新行。

來源

2016-11-18 23:58:57

Javascript和JQuery - 將輸入追加到同一類的多個div

回答

相關問題