Why won't ".end()" work if used after ".first()" in a chain?

Why won't ".end()" work if used after ".first()" in a chain?

Hi,

I have a simple bit of script.

  3.  changeToCollapse.toggleClass('box box-default').toggleClass('slab-pane').addClass(active)
  4.                 .children('.slab-pane').toggleClass('box-collapse collapse slab-pane')
  5.                 .end().children('div').toggleClass('box-collapse collapse').attr('id', 'collapse-' + $this.attr('href').replace(/#/g, ''))
  6.                 .children().first().toggleClass('box-body')
  7.                 .end().end().children('header').toggleClass('box-heading')
  8.                     .children('h4').toggleClass('box-title')
  9.                         .children('a').toggleClass(oldLinkClass).attr({
  10.                             'data-toggle': 'collapse',
  11.                             'data-parent' : '#collapse-' + $slabGroup.attr('id'),
  12.                             'href' : '#collapse-' + $this.attr('href').replace(/#/g, '')
  13.                         }); // End of chain.
The element marked in blue is the container.
The container is broken into 2 sections for easy comprehension of the problem:
Part1 is the green script, which works fine.
Part2 the red script, which does not work

The green script doesn't run no matter if I include 1 .end() or 10 .end()'s, however if I replace ".first()" and add a specific selector like so: ".children('p')", the starting selector, it works fine and runs both parts of the script.

Can anyone explain this to me as I've not managed to get any of my .end() functionality to work at all in any chaining so long as I use .first() somewhere before the .end() method.