Conversion directe de JS en JQuery

Je tente d'ajouter certaines données JSON de l'API last.fm,

J'ai utilisé alert () à plusieurs étapes pour vérifier que l'API est analysée correctement et c'est,

Cela m'a conduit à la conclusion que getElementById (). AppendChild () ne fonctionne pas, ci-dessous est l'URL de la page de test que j'ai configurée:

Http://mutant-tractor.com/tabtest.html

• Position relative de CSS / Question de position normale
• Utilisation de réagir sans états
• Analyse XML DOM vs SAX pour les fichiers volumineux
• Obtenir l'index de l'élément de liste dans la liste HTML ul en utilisant Javascript
• Comment puis-je empêcher Range.selectNode () de sélectionner un trop grand nombre de DOM lors de la tentative de sélection d'un noeud injecté avec appendChild ()?

Alors, passer de ce JS direct à JQuery, j'ai été informé que c'est le meilleur moyen d'aller. Cela m'a dit que je n'ai aucune idée de tout ce que JQuery et ma connaissance de JS sont basés sur certains Java de base que j'ai fait …

Quelle est la simplicité / pas simple de convertir cela en JQuery en cours de travail? Je voudrais faire une récompense à ce sujet mais je n'ai aucune idée de comment.

function calculateDateAgo(secAgo) { var agoString, agoRange, agoScaled; if(secAgo >= (agoRange = 60*60*24)) agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago"; else if(secAgo >= (agoRange = 60*60)) agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago"; else if(secAgo >= (agoRange = 60)) agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago"; else if(secAgo >= -60) agoString = "blastin' out now"; else agoString = "soon ;)"; return agoString; } function truncateName(name, l) { return name.length > l ? name.substr(0,l-2) + "\u2026" : name; } function lfmRecentTracks(JSONdata) { try { var eImg, eLink, eSpan, divTag, eWrapper; var oTracks = new Array().concat(JSONdata.recenttracks.track); for (var i = 0; i < oTracks.length; i++) { //insert coverart image var spanTag = document.createElement("span"); document.body.appendChild(spanTag); spanTag.className = "lfmTrackImageCell tab_item"; if(oTracks[i].image[1]["#text"] != "") { eImg = document.createElement("img"); spanTag.appendChild(eImg); eImg.src = oTracks[i].image[1]["#text"]; eImg.className = "lfmTrackImage"; }else{ eImg = document.createElement("img"); spanTag.appendChild(eImg); eImg.src = "http://cdn.last.fm/flatness/icons/res/3/track.png"; eImg.className = "lfmTrackImageNotFound"; } } for (var i = 0; i <>[lessthanhere] oTracks.length; i++) { //insert track link spanTag = document.createElement("span"); spanTag.className = "lfmTrackInfoCell tabslider"; eLink = document.createElement("a"); eLink.appendChild(document.createTextNode( truncateName(oTracks[i].name, 25) )); //alert(truncateName(oTracks[i].name, 25)); spanTag.appendChild(eLink); eLink.href = oTracks[i].url; //alert(oTracks[i].url); eLink.target = "new"; eLink.className = "lfmTrackTitle"; document.body.appendChild(spanTag); //insert artist name eSpan = document.createElement("span"); eSpan.appendChild(document.createTextNode(truncateName(oTracks[i].artist["#text"], 22) )); //alert(truncateName(oTracks[i].artist["#text"], 22)); eSpan.className = "lfmTrackArtist"; document.body.appendChild(eSpan); //insert date eSpan = document.createElement("span"); spanTag.appendChild(eSpan); eSpan.appendChild(document.createTextNode( (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts)) )); //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); eSpan.className = "lfmTrackDate"; document.body.appendChild(eSpan); } } catch(e) {} } 

La seule façon d'utiliser le code ci-dessus est en utilisant document.body.appendChild ()

J'ai essayé d'appeler le script au bas du corps et en ligne pour permettre au DOM d'être chargé complètement, mais cela n'a pas fonctionné.

Les div J'essaie de les joindre à 4 divs différents, c'est-à-dire dans la boucle for Chaque boucle doit faire référence à un élément différent,

Merci d'avance! Myles

MODIFIER:

Code HTML:

  <link href='css/style.css' rel='stylesheet' type='text/css' /> <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> <link rel="stylesheet" type="text/css" media="all" href="http://beta.mutant-tractor/wp-content/themes/toolbox/style.css" /> <link href='/css/tabbedContent.css' rel='stylesheet' type='text/css' /> <script src="/scripts/JQuery/tabbedContent.js" type="text/javascript"></script> <script type="text/javascript" src="/scripts/General/lastfmtest.js"></script> </head> <body> <aside class="widget"> <h3>I'm listening to...</h3> <div class="tabbed_content"> <div id="lfmArtRow" class="tabs"> <div class="moving_bg"> &nbsp; </div> <script type="text/javascript" src="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&amp;user=mutant_tractor&amp;api_key=6b85edc3841f3d0935d9dfed9c556634&amp;limit=4&amp;format=json&amp;callback=lfmRecentTracks"></script> </div> </aside> <div id="lfmRecentTracks" style='padding: 15px;'> <div class="content"> <div class="tabbed_content"> <div class="slide_content"> <div class="tabslider"> <div class="sliding_info">Test 1 </div> <div class="sliding_info">Test 2 </div> <div class="sliding_info">Test 3 </div> <div class="sliding_info">Test 4 </div> </div> <br style="clear: both" /> </div> </div> </div> </div> <div id="test"> </div> </body> 

• Champs de réinitialisation modifiables x
• Convertissez un nœud DOM ou un document en XML en JavaScript
• À quel point est-il coûteux d'insérer des DIV dynamiquement en utilisant JavaScript?
• Comment ajouter de nouveaux éléments sans re-rendering toute la liste avec React
• La connexion des éléments <head> avec Javascript fonctionne avec .innerHTML, mais pas les nœuds enfants XML

 document.body.appendChild( ... ); 

 var targetDiv = document.getElementById('lfmRecentTracks'); 

 targetDiv.appendChild( whatever ); 

  function calculateDateAgo(secAgo) { var agoString, agoRange, agoScaled; if(secAgo >= (agoRange = 60*60*24)) agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago"; else if(secAgo >= (agoRange = 60*60)) agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago"; else if(secAgo >= (agoRange = 60)) agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago"; else if(secAgo >= -60) agoString = "blastin' out now"; else agoString = "soon ;)"; return agoString; } function truncateName(name, l) { return name.length > l ? name.substr(0,l-2) + "\u2026" : name; } function lfmRecentTracks(JSONdata) { try { var eImg, eLink, eSpan, divTag, eWrapper, date; var oTracks = new Array().concat(JSONdata.recenttracks.track); for (var i = 0; i < oTracks.length; i++) { //insert coverart image var spanTag = $('<span class="lfmTrackImageCell tab_item"></span>'); $("body").append(spanTag); if(oTracks[i].image[1]["#text"] != "") { eImg = $('<img src="'+oTracks[i].image[1]["#text"]+'" class="lfmTrackImage" />'); spanTag.appendChild(eImg); }else{ eImg = $('<img src="http://cdn.last.fm/flatness/icons/res/3/track.png" class="lfmTrackImageNotFound" />'); spanTag.appendChild(eImg); } } for (var i = 0; i <>[lessthanhere] oTracks.length; i++) { //insert track link spanTag = $('<span class="lfmTrackInfoCell tabslider"><a href='+oTracks[i].url+' target="new" class="lfmTrackTitle">'+truncateName(oTracks[i].name, 25)+'</a></span>'); //alert(truncateName(oTracks[i].name, 25)); //alert(oTracks[i].url); $("body").append(spanTag); //insert artist name eSpan = $('<span class="lfmTrackArtist">'+truncateName(oTracks[i].artist["#text"], 22)+'</span>'); //alert(truncateName(oTracks[i].artist["#text"], 22)); $("body").append(eSpan); //insert date date = (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts)); eSpan = $('<span class="lfmTrackDate">'+ date +'</span>'); spanTag.append(eSpan); //alert((typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))); $("body").append(eSpan); } } catch(e) {} }