jquery array confusion

Question

I have a web page with a bunch of tables decorated with the datatable jquery plugin. When the page is loaded, they're hidden. Then I have a function that toggles them based on the index:

function expand_job(i) {
 $(".dataTables_wrapper")[i].show();
}

But it didn't work. Browser complains that show() is not a function. As a work around, I'm doing something like this:

function expand_job(i) {
 $(".dataTables_wrapper").each( function(idx) {
 if ( i == idx ) {
 $(this).slideToggle(300);
 }
 });
}

That works fine but it's..... I just can't let this go.

So why did the first piece of code not work? Is it because [i] takes an jquery object into and normal JS object and as a result lost the jquery functionality?

Thanks,

Answer 1

Use .eq():

$(".dataTables_wrapper").eq(i).show();

jQuery arrays contain the underlying DOM elements at each index, so when you access them the DOM functions are available but not the jQuery methods.

Answer 2

$(".dataTables_wrapper")[i]

returns a std java script object, not a jQuery object so you could:

$($(".dataTables_wrapper")[i]).show()

or use nth child or similar