Question

对于我的项目，我需要获得具有相同类的所有元素的集合。所以，我正在使用getElementsByClassName。

var tabs = document.getElementsByClassName("tab");

if (tabs) {
    for (var i = 0; i < tabs.length; i++) {
        var tab = tabs[i];
        console.log(tab);    // which outputs as 'undefined'..
        console.log(i);    // which outputs the nos of the total nodes available with class 'tab'
    }
}

我必须检索所有这些元素（具有类'tab'）并将其应用于另一个类（比如'bat'）..

我的问题是，为什么它如上所述安慰未定义？以及如何能够顺序遍历所有必需的节点。有没有可用的代码？

编辑::

忘记添加..

单击任何具有'tabs'类的选项卡时，它始终返回相同的结果..

var tabs = document.getElementsByClassName("tab");

if (tabs) {
    for (var i = 0; i < tabs.length; i++) {
        var tab = tabs[i];
        tab.addEventListener("click", function() {
            console.log(tab[i]);  // always returns undefined
            console.log(tab);  // always returns the last element in the list
            console.log(i);  // always returns the length of that list (in my case its 3)
        }, false);
    }
}

我如何能够顺序遍历所有可用元素。

Answer 1

您可以将NodeLiist更改为数组。顺便说一句，我认为if (adSetting.Core_standard_application_role) { rc = new IntegrationRoleCompany(); rc.RoleCompany = firmSettings.FirmNo.ToString(); rc.RoleName = "Core standard application role"; rcList.Add(rc); } if (adSetting.Expense_Invoice_Application_Access) { rc = new IntegrationRoleCompany(); rc.RoleCompany = firmSettings.FirmNo.ToString(); rc.RoleName = "Expense Invoice Application Access"; rcList.Add(rc); }应为tab[i]。

tabs[i]

var tabs = document.getElementsByClassName('tab');
var tabArray = Array.prototype.slice.call(tabs);
for(var i = 0; i < tabArray.length; i++) {
     console.log(tabArray[i].id);
     console.log(i);
     tabArray[i].innerHTML = "t"+(i+1);
     
};

Answer 2

注意getElementsByClassName（），如mozilla docs中所述，返回是类似数组的对象而不是数组。另一点是返回是一个实时HTMLCollection，因此如果您想通过循环更改类名，则集合将在运行时实时更新并将导致意外行为。我用类更改案例做了一个例子。查看下面链接的完整代码。

http://codepen.io/renatocolaco/pen/VemMNy

function btnClick(event){

event.preventDefault();

//action goes here
var boxes = document.getElementsByClassName("box");

console.log("fouded elements: " + boxes.length);
var element = boxes.item(0);
while(element){
    element.className = "another_box";
    element = boxes.item(0);
}

//doesn't work
//var cache = boxes.length;
//for(var i = cache; i < boxes.length; i++){
//    console.log(boxes[0]);
//    boxes[0].className = "another_box";
// }

//doesn't work
//Array.prototype.forEach.call(boxes, function(element, index, array){

    //array[index].className = "another_box";

//});
}

更新：第二个问题，当您向选项卡添加事件时，您有一个闭包问题。这是因为，在调用onclick方法时（对于任何选项卡），for循环已经完成，变量i已经有一个值（集合的大小）。

将代码包含在这样的自执行函数中：

(function (i) {
  tab.addEventListener('click', function() { console.log(i); });
})(i);

Answer 3

您以前使用过JQUERY吗？这可能是一条更容易的道路。这样你就可以使用$（＆＃34; .tab＆＃34;）。您还可以使用.forEach（）而不是for循环？可能会让它更简单

另外，Paul的例子似乎正在起作用，你能提供一个不起作用的JSfiddle吗？

遍历所有可用的getElementsByClassName节点

3 个答案: