jQuery chaining and toggle not running

Question

If I run this code,

var waitRow = $(this).parent().parent().next().get(0);
$(waitRow).children('td:nth-child(2)').html('some text').toggle();

toggle is not called.

If I instead write the following code it works. Why?

var waitRow = $(this).parent().parent().next().get(0);
$(waitRow).children('td:nth-child(2)').html('some text');
$(waitRow).toggle();

Answer 1

Maybe the first one tries to toggle the wrong dom object?

Answer 2

Because you are toggling the child element, not waitRow, I believe you could use .end() for this:

$(waitRow).children('td:nth-child(2)').html('some text').end().toggle();

To go back to the parent. Or use .parent() again.

Reference: http://docs.jquery.com/Traversing/end

Answer 3

The first one tries to toggle the first item in the children('td:nth-child(2)') wrapped set. The html() method returns the first matched item and not the whole collection.

The second one toggles the whole row.