Indentation and formatting for chained jQuery methods

Question

Below I have some jQuery code that handles footnotes. My question is actually about the formatting and indentation of the code, so I won't bother trying to explain what the code does beyond that.

I'd like to know what patterns of indentation are considered the most maintainable and readable when chaining jQuery function calls of the form: $(foo).foo(bar).foo(function(){ bar; }).foo(function(){ bar; });

Here is my specific code and the formatting/indentation that I've come up with:

$('.footnote[id^="ret_"]')
  .removeAttr('title')
  .removeAttr('alt')
  .mouseenter(function(e) {
    var footnote = $('#footnote_cont_' + this.id.substring(4)).html();

    $footnoteTooltip.stop(true, false);
    //only completely hide and change text/position if we are hovering over a different footnote
    if($footnoteTooltip.html() != footnote)
      $footnoteTooltip.hide().html(footnote).css({ left: e.pageX + 10, top: e.pageY + 15});

    $footnoteTooltip.fadeTo(fadeTime, opacity);
  })
  .mouseleave(function() {
    $footnoteTooltip.delay(fadeTime).fadeOut(fadeTime);
  })
;

Is there a more readable way of indenting this?

Answer 1

My suggestion:

$('.footnote[id^="ret_"]')
   .removeAttr('title')
   .removeAttr('alt')
   .mouseenter(function(e) {
      var footnote = $('#footnote_cont_' + this.id.substring(4)).html();  
      $footnoteTooltip.stop(true, false);

      //only completely hide and change text/position if we are hovering over a different footnote
      if($footnoteTooltip.html() != footnote)
         $footnoteTooltip.hide().html(footnote).css({ left: e.pageX + 10, top: e.pageY + 15});

      $footnoteTooltip.fadeTo(fadeTime, opacity);
   }).mouseleave(function() {
      $footnoteTooltip.delay(fadeTime).fadeOut(fadeTime);
   });

• Three or four spaces indentation - your preference. My opinion is that two spaces is more difficult to read (although Lisp uses it).
• Semicolon on same line as last method call. The only time I approve of having it on it's own line is an empty while.
• }).mouseLeave() I put the call on the same line as the end of the block to make it clear that you're calling the method of the object returned.

Answer 2

I personally find "bind('event') and trigger('event') to be cleaner and they are supposed to act faster, since that's what is done behinde the curtains anyway.

So it'd be:

$('.footnote[id^="ret_"]')
  .bind('mouseenter', function(e) {
    // code
  })
  .bind('mouseleave', function(e) {
    // code 
  });

I'd also recommend not to use $ as a prefix for the jQuery objects - http://www.bennadel.com/blog/1778-Using-Variable-In-jQuery-Code-Is-Just-Hungarian-Notation.htm. I agree with what's written in that blog post – you don't prefix arrays with arr_, booleans with is_, numbers with "num_" etc. And if you do – you probably shouldn't :-)

Answer 3

I agree with the majority of what Michael K said. And I'd also do the following:

$('.footnote[id^="ret_"]').removeAttr('title').removeAttr('alt').mouseenter(function(e) {
    var footnote = $('#footnote_cont_' + this.id.substring(4)).html();  
    $footnoteTooltip.stop(true, false);

    //only completely hide and change text/position if we are hovering over a different footnote
    if($footnoteTooltip.html() != footnote) {
        $footnoteTooltip.hide().html(footnote).css({ left: e.pageX + 10, top: e.pageY + 15});
    }

    $footnoteTooltip.fadeTo(fadeTime, opacity);
}).mouseleave(function() {
    $footnoteTooltip.delay(fadeTime).fadeOut(fadeTime);
});

• Personally I find the newlines on the chained removeAttr and mouseenter really interrupts the flow of the method, so I'd remove those.
• I would also add braces { } after the single line if statement (that's more of a preference so that I don't get bit by subtle bugs.)
• And like Michael K, I would line up the }).mouseLeave() call on the same line as the end of the block - however my treatment of the first line changes where that alignment occurs.