添加儘可能多的卡，因爲查詢後有值

Question

我想創建儘可能多的Materializecss cards，因爲Firebase查詢後有值。

E.g我做的Jquery：

$(document).ready(function() { 
    var brandsRef = firebase.database().ref().child("Brands"); 
    brandsRef.once('value', function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 
    var childKey = childSnapshot.key; 
    //Append cards here card title would be childKey 
    }); 
    }); 
}); 

如果childKey = 5，我想那5張牌出現與childKey value。

我知道我可以追加名單如下：

$(".collection").append('<a href="index.html" class=" collection-item">'+childKey+'</li>'); 

，但不知道如何巢牌。

Answer 1

另一種用純JS

答案

$(document).ready(function() { 
    var i = 0; 
    var cardsObject = [{ 
     title: "Title 1", 
     content: "Content 1", 
    }, { 
     title: "Title 2", 
     content: "Content 2", 
    }, { 
     title: "Title 3", 
     content: "Content 3", 
    }]; 

    while (i < cardsObject.length) { 
     var yourData = i; 
     createCard(cardsObject[i]) 
     i++; 
    }; 

    function createCard(cardObject) { 
     var divCard = document.createElement("div"); 
     divCard.setAttribute("class", "card"); 
     var divCardContent = document.createElement("div") 
     divCardContent.setAttribute("class", "card-content"); 
     var divCardTitle = document.createElement("span") 
     divCardTitle.setAttribute("class", "card-title"); 
     var link = document.createElement("a"); 
     link.setAttribute("href", "index.html"); 
     link.setAttribute("class", "collection-item"); 
     var parag = document.createElement("p"); 
     link.innerHTML = "Botão 1"; 
     parag.innerHTML = cardObject.content; 
     divCardTitle.innerHTML = cardObject.title; 

     divCardContent.appendChild(divCardTitle); 
     divCardContent.appendChild(parag); 
     divCardContent.appendChild(link); 
     divCard.appendChild(divCardContent); 
     document.getElementsByClassName("collection").appendChild(divCard); 
    } 
    }); 

這裏是代碼JSFiddle

Answer 2

如果你只是用卡的嵌套一個問題，只是整個HTML結構複製到您的.append()功能：

$(".collection").append("<div class='row'><div class='col s12 m6'><div class='card blue-grey darken-1'><div class='card-content white-text'><span class='card-title'>Card Title</span><p>" + childKey + "</p></div><div class='card-action'> <a href='#'This is a link</a> <a href='#'This is a link</a> </div> </div> </div></div>"); 

簡化JSfiddle