Fügen Sie so viele Karten hinzu, wie Werte nach der Abfrage vorhanden sind

Question

Ich versuche so viele Materializecss cards zu erstellen, wie Werte nach der Firebase-Abfrage vorhanden sind.

Z. B ich in 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 
    }); 
    }); 
}); 

Wenn der childKey = 5, ich möchte, dass 5-Karten mit dem childKey value erscheint.

Ich weiß, dass ich Listen wie diese anfügen können:

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

aber nicht wissen, wie für die Karten zu nisten.

Answer 1

Eine alternative Antwort mit reinem 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); 
    } 
    }); 

Hier ist der Code JSFiddle

Answer 2

Wenn Sie nur ein Problem mit der Verschachtelung der Karte haben, kopieren Sie einfach die ganze HTML-Struktur in Ihre .append() Funktion:

$(".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>"); 

ein vereinfachtes JSfiddle