Question

I´m trying to make a function that reads elements from an array and distributes its values to <tr> tags of a table.
So I wrote this code:

(function () {
  "use strict";
  var selectQG = {
    distributeCat : function (tablerow, categories) {
      var tr = $(tablerow), tri = 0;
      tr.each(function () {
        if (tri > 2) {
          for (var i = 0; i<categories.length; i++) {
            this.setAttribute('categoria',categories[i]);
          }
        }
        tri++;
      });
    }
  }
  var categories = ['1,2','3,4','5,6','7,8','9,10','11,12'];
  selectQG.distributeCat('table tr', categories);
} () );

Check this fiddle to see the html code and the function working: http://jsfiddle.net/5kqEf/2/ )

The loop is being executed 6 times and I can´t figure out why. I´m still a novice at programming, so I´m in need of some help to know what I´m doing wrong. Any help would be very appreciated.

EDIT: The ideia is that every <tr> get the array value. It is supposed to happen starting from the 3rd <tr>, that´s why I put that “if” conditional. So, the first <tr> get “categories[1]”, the second <tr> get “categories[2]” and so on.

Answer 1

The outer loop is executed 9 times, since you have 9 table tr elements. The .each will loop over every tr element, which happen to be 9 elements. See http://jsfiddle.net/5kqEf/4/

The inner for loop loops over 6 elements (the array var categories = ['1,2','3,4','5,6','7,8','9,10','11,12'];), so that makes sense…

What is your exact question?

If you want to pick a categorie based on index (and startover if there are more tr elements than categories), you might want to replace this:

 for (var i = 0; i<categories.length; i++) {
    this.setAttribute('categoria',categories[i]);
 }

with this

var index = tri % categories.length;
this.setAttribute('categoria',categories[index]);

• See https://developer.mozilla.org/en/JavaScript/Reference/Operators/Arithmetic_Operators for use of the modulus operator.