HTMLcollection 0列表长度，[n]返回未定义，转换为数组返回空数组 [英] HTMLcollection 0 list length, [n] returns undefined, converting to an array returns an empty array

问题描述

我正在使用Leaflet和d3.js制作大量SVG元素.我有一个传单地图，其下面有一些div，然后是一个脚本元素，我在其中填充了传单地图，从.json文件中添加了数据，然后尝试将事件侦听器绑定到添加和删除下面的div svg元素的类.在尝试构建<path>元素的集合时，我已经进行了遍历，并向其中添加了类，但是对于我来说，我无法获得for循环的作用.

I'm making a ton of SVG elements using leaflet and d3.js. I've got a leaflet map, some divs below that, and then a script element where I'm populating the leaflet map, adding in data from .json files, and then attempting to tie event listeners to the divs below that add and remove classes to the svg elements. While trying to build a collection of the <path> elements I already made to iterate through them and add the class to them, but for the life of me I can't get a for loop working.

    var lowlightGisUnfiltered = document.getElementById(mapDivId).getElementsByClassName("gisData");
    console.log("unfiltered",lowlightGisUnfiltered, "length", lowlightGisUnfiltered.length);

    var transfer = lowlightGisUnfiltered;
    console.log("transfer:", transfer, "length:", transfer.length);

    var llarray = Array.prototype.slice.call(lowlightGisUnfiltered);
    console.log(llarray);

    console.log(lowlightGisUnfiltered[1]);
    console.log(transfer.item(1));

    var lowlightGIS = [];
    for(var n = 0; n < lowlightGisUnfilteredArray.length; n++){
        console.log("test");
        if(llarray[n].classList.contains(selectorClass)) {

            lowlightGIS.push(lowlightGisUnfiltered[n])
            }
    }

这将输出:

• unfiltered:[](一个580元素的HTMLcollection，它在末尾列出了正确的长度)length:0
• transfer:[](一个580元素的HTMLcollection，它在末尾列出了正确的长度)length:0
• [](空数组)
• 未定义
• 空

所有这些代码都在d3和传单javascript的下面，在这些代码中我制作了动态代码.

All of that code is below the d3 and leaflet javascript where I'm making the dynamic tags.

我已经检查了所有其他HTMLcollection或NodeList问题，这些问题都涉及相似的问题，但没有找到解决方法.

I've checked all the other HTMLcollection or NodeList questions dealing with somewhat similar issues and they led to no solutions.

edit:我也尝试过.querySelectorAll，但这只是返回一个空数组.

edit: I've also tried .querySelectorAll but that just returns an empty array.

推荐答案

解决了我自己的问题:

我没有意识到d3.json是异步的.我的代码在d3.json函数之外，因此显然我的数据并未真正加载.

I didn't realize d3.json was asynchronous. My code was outside of the d3.json function so obviously my data wasn't actually loaded.

这篇关于HTMLcollection 0列表长度，[n]返回未定义，转换为数组返回空数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！