如何遍历htmlCollection

Question

我在这方面遇到了一些困难。在Backbone中，我有一个如下的函数：

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

在这种情况下，this是一个位于div中的table内的textbox。然后：

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

}

我希望遍历tbody，以逐行查找特定单元格中的textbox。问题在于这段代码：

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

似乎无法让我进入任何项。在这个例子中，如果我尝试做类似这样的事情：

  item.getElementById('test');

我遇到了一个错误：

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

为什么我无法遍历此对象并访问其中的对象？

谢谢

更新：

这是一个演示：http://jsfiddle.net/HX8RL/14/ 基本上，应该发生以下情况：当文本框更改时，我想遍历tb父表中的所有行并总结所有Tb值。请记住，所有在相同单元格位置的tb都要包括在内，因为可能会有其他不想包括的tb在其他位置。

- jason

---

尝试使用item[index].getElementById('test')，看看是否有效； - Ashutosh

谢谢回复。是的，我已经尝试过了，但没有成功。 - jason

我现在添加了一个小例子。谢谢！ - jason

Answer 1

不会有任何 TBody 的集合，尝试使用 children() 代替。

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

Demo Fiddle

- Vinay Pratap Singh Bhadauria

---

我遇到一个错误：“未捕获的类型错误：对象＃<HTMLInputElement>的属性'children'不是函数”。 - jason

实际上，这让我找到了最终的解决方案。不是使用tbody.children('tr')，而是使用tbody.rows。谢谢。 - jason

[2015年12月] 我在搜索过程中找到了这个答案，但它并不适用于我的目的。对于其他可能会遇到这个问题的人，迭代HTMLCollection的方法是使用基本的JavaScript for循环。干杯。 - Eric Hepperle - CodeSlayer2010

Answer 2

直接遍历所有输入元素以获取值。

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/

- Ashutosh

---

这是我正在寻找的真正答案，救了我的一天！ - Farzad Karimi

Answer 3

我认为这里有几个问题。您知道每个页面只能有一个ID吗？所以您必须使用document.getElementByid('test')。

由于您还在使用jQuery，因此可以使用find函数item.find('#test')。但是我认为这并不能解决您的问题。不确定您想要实现什么，如果您详细解释一下问题，我可以帮助您。

还有

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

可以用jQuery编写成：

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

我已经设置了一个fiddle，也许可以帮助你。

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();

- Dieterg