How to iterate over htmlCollection

Question

I'm having some difficulty with this. In Backbone, I have a function like this:

 functionOne: function(){
        $('#myTExtbox-' + budgetLine.attr('id')).on('change keyup paste', function(){
           that.mySecondFunction(this);
        });
 }

In this case, the this is a textbox, which is in a table, inside a div. Then:

mySecondFunction: function(tb){
       var tbody = tb.parentElement.parentElement.parentElement.parentElement.parentElement;
       //gets main parent, which is a tbody, inside a table, inside a div

}

I then want to iterate over tbody, to go through each row and find a textbox in a specific cell. The problem is that this code:

    $.each(tbody, function(index, item){
        cost = item;
        var t= index;
    });

Doesn't seem to allow me to get to any of the items. In this example, if I try to do something like:

  item.getElementById('test');

I get an error:

TypeError: Object #<HTMLCollection> has no method 'getElementById'

Why can't I iterate over this object and access objects within?

Thanks

UPDATE

Here's a fiddle: http://jsfiddle.net/HX8RL/14/

Essentially, what should happen is this: When a text box changes, I want to iterate over all the rows in the tb's parent table and sum all the Tb values. Keeping in mind, all the tb's in the same cell position, as there could be other tb's in other places that I dont want to include.

Answer 1

There wont be any collection of TBody try using children() instead

$.each(tbody.children('tr'), function(index, item){
        cost = item;
        var t= index;
    });

Demo Fiddle