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

Answer 2

Iterate over all input elements directly to get values.

var tbody = tb.parentElement.parentElement.parentElement;
    alert(tbody.id);
    var input = $('#tbody').find('input');
    alert(input);
    console.log(input);
    for (var i = 0; i < input.length; i++) {
        alert(input[i].value);
        alert(i);
    }

See fiddle- http://jsfiddle.net/HX8RL/18/

Answer 3

I think there are a few things going wrong here. You know you can only have one ID per page? So you have to do document.getElementByid('test') instead.

Since you are also using jQuery you can use the find function, item.find('#test') . But I think this wouldn't solve you problem. Not sure what you want to achieve, maybe I can help you if you explain a bit more in detail what your problem is.

Also

tb.parentElement.parentElement.parentElement.parentElement.parentElement;

can be written as (in jQuery)

$(tb).parents('tbody');

I've setup a fiddle , maybe it can help you.

Code used in fiddle:

var myFuncs = (function() {

    function funcA() {
        $('input').on('keyup', function() {
           funcB(this); 
        });
    }

    function funcB(myInput) {
        var $table = $(myInput).parents('table');

        $table.find('tr > td > input').each(function() {
           var $input = $(this);

            if($(myInput).attr('id') != $input.attr('id'))
                $input.val("I'm called from another input");
        });
    }

    return {
        funcA : funcA
    }

})();

myFuncs.funcA();