如何追加在陣列ID來的DIV與JavaScript

Question

我有低於9個字符串的數組：

var boardBox = ['#box1', 
       '#box2', 
       '#box3', 
       '#box4', 
       '#box5', 
       '#box6', 
       '#box7', 
       '#box8', 
       '#box9']; 

欲每個ID附加到被動態添加到DOM如下

9倍的DIV

for (var i = 0; i < 9; i++){ 
     $(".row").append("<div class='col-md-4'></div>"); 
    } 

是追加的方式來做到這一點？我試過了，沒有運行。我試圖

$(".row").text(boardBox[i]).appendTo('<div></div>'); 

+1

你真的想在ID中使用'＃'，或者因爲它是你在數組中添加的ID – Tushar

Answer 1

var boardBox = ['#box1', 
 
    '#box2', 
 
    '#box3', 
 
    '#box4', 
 
    '#box5', 
 
    '#box6', 
 
    '#box7', 
 
    '#box8', 
 
    '#box9']; 
 
var html = ''; 
 
for (var i = 0; i < boardBox.length; i++) { 
 
    html += "<div id="+boardBox[i]+ " class='col-md-4'>"+boardBox[i]+"</div>" 
 
} 
 

 
$(".row").append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"></div>

Answer 2

可以使用i通過索引來訪問數組元素並連接作爲要附加DIV的內容一行值：

for (var i = 0; i < 9; i++){ 
    $(".row").append("<div class='col-md-4' >" + boardBox[i] + "</div>"); 
} 

Answer 3

相反的另一個for循環，你可以使用它喜歡：

$.each(boardBox, function(i, id){ // get the each id here 
    $('<div>', { 
     id: id, // apply it here 
     class:"col-md-4", 
     text:"test div" 
    }).appendTo('.row'); // append element here. 
}); 

Answer 4

您可以使用appendTo()

var boardBox = ['#box1', 
 
    '#box2', 
 
    '#box3', 
 
    '#box4', 
 
    '#box5', 
 
    '#box6', 
 
    '#box7', 
 
    '#box8', 
 
    '#box9' 
 
]; 
 

 
boardBox.forEach(function(v) { 
 
// iterating over array 
 
    $('<div/>', { 
 
    text: v, 
 
    id: v 
 
    }) 
 
    // generating element with content and id as array value 
 
    .appendTo('.row'); 
 
    // appendding div to '.row' 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class=row></div>