var listItems = "";
$.each(msg.d, function(index, value) {
listItems += "<li><a href='#' class='" + value.Availability + "' title='" + value.Time + "' >" + value.Time + " - " + value.Availability + "</a></li>"
});
var teeTimeLinks = $(listItems + 'li');
$.each(teeTimeLinks, function() {
var link = $(this).find('a');
link.bind('click', function(event) {
event.preventDefault(); //stop the link from going to href
TeeTimeSelected(this);
});
});
The above code works. BUT, msg.d returns 80 objects. We then loop through it and make our list items. AND then we loop through it again and apply the click event. How can this be optimized into one loop?
Perhaps if we knew more clearly where msg.d comes from and in what format, and how teeTimeLinks will be used after this, we could come up with some alternative code inbetween.
msg.d is the returned JSON. About 80 objects with the properties of Availability and Time is all. The code works, but I can’t help but think there’s gotta be more efficient way to do it. Somehow attach the event handler as I create the listItem…
function ReturnTeeTimesForThisDate(msg) {
var totalTeeTimes = msg.d.length;
var listItems = "";
if (totalTeeTimes != 0) {
$.each(msg.d, function(index, value) {
listItems += "<li><a href='#' class='" + value.Availability + "' title='" + value.Time + "' >" + value.Time + " - " + value.Availability + "</a></li>"
});
//Returns a list of tee times and applies CSS and event handlers
var teeTimeLinks = $(listItems + 'li');
$.each(teeTimeLinks, function() {
var link = $(this).find('a');
link.bind('click', function(event) {
event.preventDefault(); //stop the link from going to href
TeeTimeSelected(this);
});
});
$('#teeTimeList').html(teeTimeLinks);
}
}
var teeTimeLinks = $(listItems + ‘li’);there was supposed to be a space before the li so ’ li’ that way it would be a selector. As in find all li in listItems…
The thing I don’t like about your solution is the appendTo($(‘#some_list’));
Doesn’t that make me traverse the DOM every time?
>>By the way, you really need to stop the habit of using single quotes for HTML attributes. Use double quotes.
It was for me. When I was editing the code I always had to backtrack, scanning up and down the code to check what context the quote was supposed to be. Is it a JavaScript quote or is it supposed to be an HTML quote. You’ll find that the code I provided for you above has the quotes now in the standard fashion.
By sticking to the standard of doublequotes for HTML attribute quotes and single quotes for JavaScript strings, we can then instantly know what the content is supposed to be.
By sticking to the standard of doublequotes for HTML attribute quotes and single quotes for JavaScript strings, we can then instantly know what the content is supposed to be.
Wow Paul, that was thinking outside of the box. Good one. But, I can’t help but wonder how expensive .replaceWith is? I mean .html() is simply innerHTML. What does jQuery have to do under the hood to do .replaceWith()?
@Tommy - that’s what I was originally doing. Keep in mind each time the method is called we have to replace the list items with new ones. Which is why .html() works so well and appendTo() will not.
When jQuery has the information in $teeTimeList is is already an object. Using html means converting the objects to text, and then the browser converting them to objects once again.
You’re welcome to speed test the differences, but the difference is so small that you will not be capable of determining the difference when comparing the two side by side.