[jQuery] Having trouble thinking through the "how": make node, append (w/o showing), then fade in ...
I'm having a hard time working through this in my mind (and a much
harder time in code.)
I am receiving a JSON array. I am then looping through each result,
and trying to create three text boxes within a list item for each line
of data.
The result should look like this: <li><input type="text"
value="something" />...</li>
Once that node is created, I want to append it to an unordered list,
but not visible, so that it can immediately slide open.
I can think of some sloppy ways to do this (and maybe they are right),
but I assume, like every time I use JQ, there is a more elegant
solution. Any tips or advice are greatly appreciated.
Here's my code, if it helps:
$("document").ready(function () {
$("#retrieveData").click(function() {
if($("#urlToGet").val() != undefined) {
$.getJSON("returnData.php", { url: $("#urlToGet").val() },
function(data){
//alert(data.length);
$.each(data, function (i, item) {
$("#myList").append("<li id='i"+i+"' style='height:0;
overflow:hidden'>
<input type='text' value=" + item.a + " />
</li>");
$("#i" + i).animate({height: "20px" });
});
});
} else {
alert("You must enter a URL for this feature to work.");
}
return false;
})
})
And then in the <body> there is <ul id="myList"></ul>