Object iteration and appending to form In this code, I'm getting the json from backend.  Once I find the json availability, I loop and make 5 columns.  Once the columns are made, I append after the legend of my form.

Can this be improved any further?

if(data.hasOwnProperty("allLocales")){

            var col0 = $("&lt;fieldset /&gt;"), 
                col1 = $("&lt;fieldset /&gt;"),
                col2 = $("&lt;fieldset /&gt;"),
                col3 = $("&lt;fieldset /&gt;"),
                col4 = $("&lt;fieldset /&gt;");

            $.map(data["allLocales"], function(value, i){

                var name = value.name;

                if(i % 5 === 0 ){
                    col0.append($("&lt;label /&gt;").text(name).prepend($("&lt;input type='checkbox' /&gt;").attr("value", name)));
                }else if(i % 5 === 1){
                    col1.append($("&lt;label /&gt;").text(name).prepend($("&lt;input type='checkbox' /&gt;").attr("value", name)));
                }else if(i % 5 === 2){
                    col2.append($("&lt;label /&gt;").text(name).prepend($("&lt;input type='checkbox' /&gt;").attr("value", name)));
                }else if(i % 5 === 3){
                    col3.append($("&lt;label /&gt;").text(name).prepend($("&lt;input type='checkbox' /&gt;").attr("value", name)));
                }else if(i % 5 === 4){
                    col4.append($("&lt;label /&gt;").text(name).prepend($("&lt;input type='checkbox' /&gt;").attr("value", name)));
                }

            })

            $("form legend").after(col0,col1,col2,col3,col4).end().find("span.submit").css({display:"block"});
        }
First you should not create on function for each column.
In place of :

var col0 = $("&lt;fieldset /&gt;"), 
    col1 = $("&lt;fieldset /&gt;"),
    col2 = $("&lt;fieldset /&gt;"),
    col3 = $("&lt;fieldset /&gt;"),
    col4 = $("&lt;fieldset /&gt;");


You should use :

var col_type  = "&lt;fieldset /&gt;";




var cols      = {}


And then add it to your JSON :

cols["col"+ i % 5]  = $(col_type)...


So, you'll get a JSON object of this form :

{
  "col0":   &lt;YOUR_jQuery element&gt;,
  "col1":   &lt;YOUR_jQuery element&gt;,
  "col2":   &lt;YOUR_jQuery element&gt;,
  "col3":   &lt;YOUR_jQuery element&gt;,
  "col4":   &lt;YOUR_jQuery element&gt;
}




JSON are not support in jQuery for after() iteration. You must use an Array.

cols.push($(col_type)...)


And you won't need one variable for each new column.


Could you give a sample of your data.allLocales ?
And a sample of your HTML code ?


And no if(data.hasOwnProperty("allLocales")) is needed

Described :

for( column in data["allLocales"] ) {
  var name = data["allLocales"][column].name

  $("form legend").after(
    $("&lt;fieldset /&gt;")
    .append(
      $("&lt;label /&gt;")
      .text(name)
      .prepend(
        $("&lt;input type='checkbox' /&gt;")
        .attr("value", name)
      )
    )
  )
 .end()
 .find("span.submit")
 .css({display: "block"});
}


Shorter :

for( column in data["allLocales"] ) {
  var name = data["allLocales"][column].name
  $("form legend").after($("&lt;fieldset /&gt;").append(
    $("&lt;label /&gt;").text(name).prepend($("&lt;input type='checkbox' /&gt;").attr("value", name)))).end().find("span.submit").css({display: "block"}
  )
}