jQuery show() not a function - used in adding DOM elements

Question

I am migrating from PrototypeJS to jQuery, and I'm having issues with applying functionality to new DOM elements added into a simple banner script.

Basically, on page load, new DIV elements are being placed into the DOM using append(), as I understand, this is how it's done in jQuery as opposed to Prototype's Element object.

$.each(Banner.data, function(i, e) {
  $('#banner_area').append("<div class='banner_slot' id='bannner-"+ i +"'>...[nested elements]</div>").hide();
    });
$('.banner_slot').get(0).show();

Upon checking Firebug, the elements have successfully been added to the DOM, and are immediately hidden. Then the first (0) element should show... however, Firebug give me this error:

TypeError: $(...).get(...).show is not a function
http://www.ten103.com/javascript/global_desktop.js
Line 15

I'm sure this is something simple, as I've been using Prototype for years, but need to move to jQuery because, well... more people use it so the resources are infinitely better.

Is there some fundamental difference between the two that I'm missing here?

Answer 1

$('.banner_slot').get(0).show();

change to

$('.banner_slot').eq(0).show();

.get() returns DOM element while .eq() returns jQuery object and .show() is jQuery API.

For more information about .get() and .eq() checkout the jQuery API docs

Answer 2

You need to update

$('.banner_slot').get(0).show();

to

$($('.banner_slot').get(0)).show();

Note : get() gives you a DOM Element and show() is applicable on jQuery object, hence, you need to convert it into jQuery object to use the function.