Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

I'm curious as to how other people indent/break long jQuery chains, as I can never decide what is more readable (particularly when using .end() to "close" a block of methods e.g.

$(this).not(":has(.pointer)").append(pointerHtml)
                .end()
            .closest("li").toggleClass("selected")
            .siblings().removeClass("selected")
            .andSelf().removeClass("pre-selected").animate({
                                 left: 12
                                 opacity: 0.5
                            })
                .end().end()
            .filter(".selected").prev().addClass("pre-selected")
                            .end().children().load("/homepage.html", function() {
                                       //code
                             }).end().end().addClass("processed");

How would YOU format this?

*edit included a method with a callback to make it a bit more interesting

share|improve this question
1  
NOTE: This is not a question that should have been asked on Stack Overflow as there's not actually a problem with the code. It's a question of style. It might be OK for Code Review, but it is on topic here. –  ChrisF Apr 14 '11 at 16:36
    
Not sure that editing your question after people have answered it is a very nice thing to do. Your example now just seems contrived. In any event, past a certain point you have to start refactoring behavior out to simplify things. –  Rein Henrichs Apr 14 '11 at 17:25
    
Also, if you find an answer useful, you might consider accepting it. –  Rein Henrichs Apr 14 '11 at 17:28

2 Answers 2

For indentation I'd say that selector would be equivalent of opening a block ({), while .end() -- equivalent of }

share|improve this answer

I use indent to signify hierarchy.

$(this).not(":has(.pointer)")
  .append(pointerHtml).end()
  .closest("li")
    .toggleClass("selected")
    .siblings()
      .removeClass("selected")
      .andSelf().removeClass("pre-selected")
    .end()
  .end()
  .filter(".selected")
    .prev().addClass("pre-selected");
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.