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?

Solution 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

Solution 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.

Comments

[Miguel Ike]

instead of $('.banner_slot').get(0).show(), try using $('.banner_slot')[0].show()

[adeneo]

Use the proper method, just replace get with eq

[Rory McCrossan]

I would assume it's because you have a jQuery object, which you use to get a DOMElement, then turn it back in to a jQuery object again, when instead you could just use eq().

[Nikhil Aggarwal]

@RoryMcCrossan - I agree. I wanted to highlight the issue and then add notes.

[Nikhil Aggarwal]

@vinayakj - I agree, however, as I said I wanted to highlight the issue.

[Trev14]

Thank you! There needs to be a more obvious explanation for this. I wish jQuery could just work with DOM elements as well instead of causing these confusing errors.