Is there a preferred way of formatting jQuery chains to make them more readable?

Question

Given this following sample code which clones a table row, sets some properties and then appends it to a table:

$("#FundTable").append(
    objButton.parents("tr").clone()
        .find(".RowTitle").text("Row " + nAddCount).end()
        .find(".FundManagerSelect").attr("id", "FundManager" + nAddCount)
                                .change(function() { ChangeFundRow(); }).end()
        .find(".FundNameSelect").attr("id", "FundName" + nAddCount).end()
);

Does anyone have any suggestions as to how this might be formatted to be easier on the eye? Is there any accepted convention for doing this?

It would be useful to have a set of rules that can be followed, and that can be incorporated into a set of standards.

Answer 1

How about:

$("#FundTable").append(
    objButton.parents("tr").clone()
        .find(".RowTitle").text("Row " + nAddCount)
        .end()
        .find(".FundManagerSelect").attr("id", "FundManager" + nAddCount)
        .change(function() { 
            ChangeFundRow() 
        })
        .end()
        .find(".FundNameSelect").attr("id", "FundName" + nAddCount)
        .end()
);

I find that chaining, when used in moderation, can lead to better readability.

Answer 2

Don't chain so much.

var newContent = objButton.parents("tr").clone();

newContent.find(".RowTitle").text("Row " + nAddCount)
newContent.find(".FundManagerSelect").attr("id", "FundManager" + nAddCount)
    .change(function() { ChangeFundRow() });
newContent.find(".FundNameSelect").attr("id", "FundName" + nAddCount);

$("#FundTable").append(newContent);

Less chaining, but it seems easier to read imo.

Answer 3

I would refactor to this. I find more than 3 chained methods uneasy on the eye

       var $clonedRow =  objButton.parents("tr").clone();

       $clonedRow.find(".RowTitle") 
                 .text("Row " + nAddCount);

       $clonedRow.find(".FundManagerSelect")
                 .attr("id", "FundManager" + nAddCount)
                 .change( ChangeFundRow );

       $clonedRow.find(".FundNameSelect")
                 .attr("id", "FundName" + nAddCount);

       $clonedRow.appendTo("#FundTable");

Answer 4

I indent as if it were bracketed:

$("#FundTable")
    .append(objButton.parents("tr")
        .clone()
        .find(".RowTitle")
            .text("Row " + nAddCount)
        .end()
        .find(".FundManagerSelect")
            .attr("id", "FundManager" + nAddCount)
            .change(function() {
                ChangeFundRow(); // you were missing a semicolon here, btw
            })
        .end()
        .find(".FundNameSelect")
            .attr("id", "FundName" + nAddCount)
        .end()
    )
;