启用同一班级的最后一个div

I am making an ajax call to get more results and get them appended to the existing ones in the same page. While the contents are fetched, i need to show a scrolling spinner every time requests are send. In order to achieve this i go on adding a div at bottom of results fetched like this:

<div class="loader" style="display:block"></div>

And i am trying to show the spinner using the below code:

beforeSend: function() 
{
      $('#loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
      $('#loader:last-child').html('');
}

But i am not able to get the spinner effect, it is not at all shown on the page(results are though fetched).

Please help me in getting it corrected. Any other thoughts to have the spinner effect are also appreciated.

EDIT: I have removed quotes as they wre in my perl code. sorry for that.

Put a space in <imgsrc so that its <img src

Your selector should be $('.loader:last-child') since loader is a class not an id. (Use . instead of #)

why are you using \ slashes

try this

beforeSend: function() 
{
      $('.loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
      $('.loader:last-child').html('');
}

Try this

beforeSend: function() 
{
      $("#loader").last().html('<img src="/graphics/loading.gif" alt="Wait" />');
}
complete: function()
{
      $("#loader").last().html('');
}

You do not need to escape the quotes, also put a space between imgsrc like img src

As well mentioned by rob in his answer that

Your selector should be $('.loader:last-child') since loader is a class not an id. Use pereiod (.) instead of (#)

Also add a comma , after beforeSend: function(){}, and try;

Use the following code:

beforeSend: function() {
    $('.loader:last-child').html('<img src="/graphics/loading.gif" alt="Wait" />');
},

complete: function() {
      $('.loader:last-child').html('');
}

Try appending the loader image to the HTML of e #loader and then remove it. (note that I added an id to the image)

beforeSend: function() 
{
      $('.loader').append('<img src="/graphics/loading.gif" id="waitSpinner" alt="Wait" />');
}
complete: function()
{
      $('#waitSpinner').remove();
}

Edit: changed #loader to .loader, as that was the class.

you have to use . for selecting class not # its for id and also , is missing between beforeComplete and complete.

Instead of adding any new elements or images, you could just add a class to the container of your results while it's loading, and use the class to add padding and the spinner graphic as the background image of the container. When the loading completes, remove the class:

beforeSend: function(){
    $('#resultsContainer').addClass('loading');
}
complete: function(){
    $('#resultsContainer').removeClass('loading');
}

Then your CSS could look like:

#resultsContainer.loading {
    background: url(graphics/loading.gif) no-repeat center bottom;
    padding-bottom: 2em;
}

For extra style, add transitions to padding-bottom on resultContainer, so that the loading graphic slides smoothly in and out.