将直接JS转换为JQuery [英] Converting Straight JS to JQuery
问题描述
我试图从last.fm API附加一些JSON数据，
Im trying to append some JSON data from the last.fm API,
我已经在几个阶段使用alert（）来验证API正在被正确解析而且是
I have been using alert() at several stages to verify the API is being parsed correctly and it is,
这导致我得出结论，getElementById（）。appendChild（）不起作用，下面是我设置的测试页面的URL up：
This has led me to the conclusion that getElementById().appendChild() doesn't work, below is the URL to the test page I have set up:
http：//突变型拖拉机。 com / tabtest.html
所以从这个直接的JS转移到JQuery我被告知是最好的方式，
这就是说我没有任何关于JQuery和我的JS知识的线索是基于我已经完成的一些基本的Java ...
So moving from this straight JS to JQuery I have been advised is the best way to go, That said I have NO clue about anything JQuery and my JS knowledge is based on some basic Java I have done...
将它转换为工作的JQuery是多么简单/不简单？
我会把一个赏金这个，但我不知道如何。
How simple/not simple is it to convert this to working JQuery? I would put a bounty on this but I have no idea how to.
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) {}
}
上述代码的唯一方法是使用document.body.appendChild（）
The only way the above code works is by using document.body.appendChild()
我已尝试在脚本底部调用脚本并内联，以便允许DOM被完全加载，但是这些都没有起作用。
I have tried calling the script at the bottom of the body and inline so to allow the DOM to be loaded fully but these didn't work.
我试图附加它们的div是4个不同的div，即在for循环中，每个循环都需要引用不同的元素，
The div I'm trying to attach them to are 4 different divs i.e. in the for loop each loop needs to reference a different element,
提前感谢！
Myles
Thanks in advance! Myles
编辑：
HTML代码：
HTML code:
<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">
</div>
<script type="text/javascript" src="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=mutant_tractor&api_key=6b85edc3841f3d0935d9dfed9c556634&limit=4&format=json&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>
推荐答案
而不是
document.body.appendChild( ... );
让您的功能找到< div> 您要添加的内容，如下所示：
have your function locate the <div> where you want the content added, like this:
var targetDiv = document.getElementById('lfmRecentTracks');
（请确保确定页面上只有一个元素idvalue !!另外，为了IE，请确保该名称不是任何东西的名称属性。）
(Do make sure that there's only one element on the page with that "id" value!! Also, for the sake of IE, make sure that name isn't a "name" attribute on anything either.)
那么你应该是能够做到这一点：
Then you should be able to do this:
targetDiv.appendChild( whatever );
这篇关于将直接JS转换为JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
