JQuery Selector auf Variable?

Question

Ich bin neu bei jQuery und JavaScript, also bitte hab Geduld mit mir. Ich versuche, einen AJAX-GET-Request auszuführen, um meine JSON-Datei abzurufen, die Track-Informationen enthält, die so formatiert sind:

[
    {
        "name" : "Short Skirt, Long Jacket",
        "artist" : "Cake",
        "album" : "Comfort Eagle",
        "genre" : "Rock",
        "year" : 2001,
        "albumCoverURL" : "images/ComfortEagle.jpg",
        "bandWebsiteURL" : "http://www.cakemusic.com"
    },
    {
        ...
    }
]

Ich versuche dies mit diesen beiden Funktionen zu tun:

function loadJSON () 
{
    $.getJSON("lab4.json", updateHTML(result));
}

$(document).ready(function () 
{
    $("site").click(function () 
    {
        loadJSON();
    });
});

Wenn der Benutzer auf den Link mit der id "site" klickt, möchte ich einen asynchronen Javascript-Aufruf senden, um meine JSON-Datei abzurufen. Bei Erfolg sollte er meine updateHTML-Funktion hier aufrufen:

function updateHTML (result)
{
    var templateNode = document.getElementById("song-template").cloneNode(true);
    document.removeChild(getElementById("song-template"));

    $.each(result, function(i, song)
    {
        var songNode = templateNode.cloneNode(true);
    });
}

Jetzt stecke ich fest: Jetzt, da ich diesen geklonten Knoten habe, wie kann ich jQuery verwenden, um alle Felder im HTML hier auszufüllen:

Normalerweise würde ich einfach so vorgehen:

$("site").attr("src","images/ComfortEagle.jpg");

Aber jetzt stehe ich vor zwei Problemen. Erstens, wie bekomme ich die neue URL aus meinem JSON-Objekt, das ich als 'song' eingelesen habe, und zweitens, wie richte ich die "site"-ID innerhalb des Knotens ein, den ich zuvor geklont habe, bevor ich ihn dem HTML des Dokuments hinzufüge? Danke!

Answer 1

Sie können die ID aus Ihren Schlüsseln konkatenieren

$.each(dataObj, function(key, val) {
    //dataObj ist Ihr zurückgegebenes JSON
    if ($("#" + key).length)
        $("#" + key).val(val);
});

Answer 2

Zuerst, wenn Sie jQuery verwenden, verwenden Sie jQuery.

Sie können die jQuery clone() Methode verwenden, anstatt die js cloneNode Methode zu verwenden.

SIEHE DIESES FIDDLE

Ich denke das ist, was du versuchst zu tun mit einer mehr jquery-ähnlichen Lösung.

var song = [1,2,3,4];

var templateNode = $("#lala");
$.each(song, function(key, val){
   var songNode = templateNode.clone(true);
    songNode.children('span.yo').text(val);
    $('#wrap').append(songNode);
});

Was das Json-Parsing betrifft, sollten Sie in jeder Iteration auf die Eigenschaften wie bei jedem anderen Json zugreifen können. In der each-Schleife zielen Sie einfach auf eine Eigenschaft wie:

song.albumCoverURL