Can't get jQuery hide working

Question

I need a sanity check as I've spent about an hour trying to figure this out!

getRows().each(function() {
    alert(this);     // alerts '[object HTMLTableRowElement]', nothing wrong here
    this.hide();     // row not hidden - wtf?
    alert('hidden'); // no alert - more wtf!
});

What can be wrong that calling hide() is bombing out?

Answer 1

Inside the .each() this is a DOM element (HTMLTableRowElement), you need to wrap it to make it a jQuery object again (which has the .hide() method) like this:

$(this).hide();

Without this, you're getting a method undefined error, because HTMLTableRowElement doesn't have the .hide() method :) This error is also why the alert isn't firing afterwards, because execution stopped on the error.

Answer 2

try $(this).hide()

Answer 3

You don't get the 2nd alert because the previous line caused an error. Change it to

$(this).hide();

this refers to the selected element, but that doesn't have a hide method. You need to wrap it in a jQuery object which has the hide method.