NEWBIE QUESTION - AJAX AND .EACH FUNCTION
I have written the following script to display items from a xml file. I want the final click function to grab the info pertaining to that specific item, stored in the variable "hours". Right now, my code returns all variable. How do I return the variable relative to the current item clicked on?
this.ajaxCallTest = function() {
$.ajax({
type: "GET",
url: "specialOfferings.xml",
dataType: "xml",
success: parseXml
});
$("body").append("<div id='specialsModule'><ul></div>")
function parseXml(xml) {
$(xml).find('unit').each(function() {
var $unit = $(this);
var model = $unit.find('model').text();
var make = $unit.find('make').text();
var sn = $unit.find('sn').text();
var type = $unit.find('type').text();
var year = $unit.find('year').text();
var ss = $unit.find('ss').text();
var fuel = $unit.find('fuel').text();
var model = $unit.find('model').text();
var hours = $unit.find('hours').text();
var thumbUrl = $unit.find('sn').text() + "_thumb.jpg";
var imageUrl = ($unit.find('sn') + '.jpg');
var detailsLink = '<a class="specialsLink">Click for More Info!</a>';
var unitInfo = '<li>';
unitInfo += '<h5 class="specialsImgTitle"> '+ year + make + model +' </h5>';
unitInfo += '<img alt="" src="' + thumbUrl + '" />';
unitInfo += detailsLink;
unitInfo += '</li>';
$("#specialsModule ul").append($(unitInfo));
$(".specialsLink").bind("click", function(){
$(this).append('<p>' + hours + '</p>');
});
});
} // end parseXml
}; //end ajacCalltest
$(document).ready(function(){
ajaxCallTest();
});