嵌套 DOM 生成错误

Question

我正在尝试使用 Bulma Flexbox 插件为我从 REST API 提取的每组数据生成图块。我正在生成三个水平放置的瓷砖，每一行堆叠在另一行之上。 Bulma 文档详细说明了层次结构应该如何工作，但类名非常具有自我描述性。

我设法在 Javascript 中创建了正确执行所有 DOM 操作的循环。瓷砖按我想要的方式布置，但每一行瓷砖都显示相同的内容。我对如何解决这个问题没有想法。我意识到我不应该在循环中声明变量，但我希望它首先起作用。这是我正在使用的功能：

“dataDiv”是： <div id="data" class="tile is-ancestor is-vertical"></div>

function createTileLayout() {

    for(var i = 0; i < earthquakesObject.features.length; i++) {

        var dataDiv = document.getElementById("data");
        var parentDiv = document.createElement("DIV");
        parentDiv.className = "tile is-parent";

        for(var count = 0; count < 3; count++) { 
            //creating child div for flexbox
            var childDiv = document.createElement("DIV");
            childDiv.className = "tile is-4 is-child box";

            //Creating elements
            var titleHeader = document.createElement("H2");
            var magnitudeElement = document.createElement("P");
            var locationElement = document.createElement("P");
            var tsunamiElement = document.createElement("P");
            var urlElement = document.createElement("P");
            var anchorElement = document.createElement("A");
            anchorElement.href = 
            earthquakesObject.features[i].properties.url; 

            //create text nodes for each property
            var title = document.createTextNode("Earthquake " + (i + 
                enter code here1));
            var magnitude = document.createTextNode("Magnitude: " + 
                earthquakesObject.features[i].properties.mag);
            var location = document.createTextNode("Location: " + 
                earthquakesObject.features[i].properties.place);
            var tsunami = document.createTextNode("There" + wasTsunami() 
                + "a tsunami warning with this earthquake.");
            var link = document.createTextNode("Link to the USGS page on 
                the earthquake.");

            //appending text nodes
            titleHeader.appendChild(title);        
            magnitudeElement.appendChild(magnitude);
            locationElement.appendChild(location);
            tsunamiElement.appendChild(tsunami);
            anchorElement.appendChild(link);
            urlElement.appendChild(anchorElement);

            //appending elements to child div
            childDiv.appendChild(titleHeader);
            childDiv.appendChild(magnitudeElement);
            childDiv.appendChild(locationElement);
            childDiv.appendChild(tsunamiElement);
            childDiv.appendChild(urlElement); 
            parentDiv.appendChild(childDiv);
        }
        dataDiv.appendChild(parentDiv);
    } 
}

可以在此处找到该网站的实时版本： https://odocoileus.github.io/earthquake-app/ （对糟糕的造型感到抱歉）。谢谢！

Answer 1

我解决了这个问题，这是我使用的代码。

function createTileLayout() {
            for(var i = 0; i < earthquakesObject.features.length;) {
             //Create 3 tiles in the parent element
                var dataDiv = document.getElementById("data");
                var parentDiv = document.createElement("DIV");
                var titleHeader, magnitudeElement, locationElement, tsunamiElement,
                    urlElement, anchorElement, title, magnitude, location, tsunami, 
                    link, childDiv;

                parentDiv.className = "tile is-parent";

                for(var count = 0; count < 3; count++, i++) { 
                    //creating child div for flexbox
                    childDiv = document.createElement("DIV");
                    childDiv.className = "tile is-4 is-child box";

                    //Creating elements
                    titleHeader = document.createElement("H2");
                    magnitudeElement = document.createElement("P");
                    locationElement = document.createElement("P");
                    tsunamiElement = document.createElement("P");
                    urlElement = document.createElement("P");
                    anchorElement = document.createElement("A");
                    anchorElement.href = earthquakesObject.features[i].properties.url; 

                    //create text nodes for each property
                    title = document.createTextNode("Earthquake " + (i + 1));
                    magnitude = document.createTextNode("Magnitude: " + earthquakesObject.features[i].properties.mag);
                    location = document.createTextNode("Location: " + earthquakesObject.features[i].properties.place);
                    tsunami = document.createTextNode("There" + wasTsunami() + "a tsunami warning with this earthquake.");
                    link = document.createTextNode("Link to the USGS page on the earthquake.");

                    //appending text nodes
                    titleHeader.appendChild(title);        
                    magnitudeElement.appendChild(magnitude);
                    locationElement.appendChild(location);
                    tsunamiElement.appendChild(tsunami);
                    anchorElement.appendChild(link);
                    urlElement.appendChild(anchorElement);

                    //appending elements to child div
                    childDiv.appendChild(titleHeader);
                    childDiv.appendChild(magnitudeElement);
                    childDiv.appendChild(locationElement);
                    childDiv.appendChild(tsunamiElement);
                    childDiv.appendChild(urlElement); 
                    parentDiv.appendChild(childDiv);

                }
        dataDiv.appendChild(parentDiv);
    }   
}