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

admin管理员组

文章数量:1241083

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

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./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?

• javascript
• jquery
• dom

Share Improve this question Follow asked Jul 11, 2015 at 15:53 mwieczorekmwieczorek 2,25277 gold badges3434 silver badges3939 bronze badges 2

• instead of $('.banner_slot').get(0).show(), try using $('.banner_slot')[0].show() – Miguel Ike Commented Jul 11, 2015 at 15:55
• 6 Use the proper method, just replace get with eq – adeneo Commented Jul 11, 2015 at 15:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

$('.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

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.

本文标签： javascriptjQuery show() not a functionused in adding DOM elementsStack Overflow