Question

我正在尝试在“行”div中嵌套3个div。

我让它以“长格式”工作（多个var而不是循环遍历数组）。我重构了我的代码，现在我没有得到任何错误代码，我的代码也没有附加到HTML文件。当我控制日志时，我得到一个包含3个对象的数组。我确定我错过了一些小事。

无论如何，一些帮助会很棒！

 <div class="row">
   **nested divs go here.
 </div>

 $(document).ready(function() {
        $.get("http://api.openweathermap.org/data/2.5/forecast/daily?id4726206&cnt=3", {
            APPID: "MY API KEY",
            lat: 29.423017,
            lon: -98.48527,
            units: "imperial"
        }).done(function(data) {

            var stationId = data.city.name;

            // Stattion Name
            $('#station').append(stationId);

            //console.log(data);
            var forecast = data.list;

            //Wind Direction in Compass Format
            function getDirection(dir) {
                var compass = ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'];
                var result = Math.floor((360 - dir) / 22.5);
                return compass[result];
            }

            //Forecast Variables

            $.each(forecast, function(i, v) {
                var html = '';
                html += "<div class='col-sm-3 wInfo'>" + "<div class='title'>High / Low</div>";
                html += "<div class='cTemp'>" + (Math.ceil(forecast[i].temp.max)) + '&deg;';
                html += " / " + (Math.ceil(forecast[i].temp.min)) + '&deg;' + "</div>";
                html += "<div class='tempIcon'>" + "<img src='http://openweathermap.org/img/w/" + forecast[i].weather[0].icon;
                html += ".png' alt=''></div>" + "<div class='conditions' id='castId'>" + '<span class="cond">' + forecast[i].weather[0].main;
                html += "</span>: " + "<span>" + forecast[i].weather[0].description + '</span>' + "</div>";
                html += "<div class='conditions'>" + "<span class='cond'>Humidity: </span>" + "<span>" + forecast[i].humidity + "&#37;</span></div>";
                html += "<div class='conditions'>" + "<span class='cond'>Wind: </span>" + "<span>" + (Math.floor(forecast[i].speed));
                html += " mph / " + getDirection(forecast[i].deg) + "</span></div>" + "<div class='conditions'>";
                html += "<span class='cond'>Pressure: </span>" + "<span>" + forecast[i].pressure + "</span></div>";
                return html;


            });
            $('.forecast').append(forecast);
            console.log(forecast);

        });

    });

Answer 1

您正尝试在html中附加数组预测。哪个不行。你应该在外部声明html变量，然后在append函数中使用它。

我还建议使用数组使用字符串构建器逻辑，然后将其转换为字符串并附加它。记住字符串连接是繁重的操作符，因为每次连接都会创建新的elememt实例：

var html = [];
$.each(forecast, function(i, v) {
            html.push("<div class='col-sm-3 wInfo'>" + "<div class='title'>High / Low</div>");
            html.push("<div class='cTemp'>" + (Math.ceil(forecast[i].temp.max)) + '&deg;');
            html.push(" / " + (Math.ceil(forecast[i].temp.min)) + '&deg;' + "</div>");
            html.push("<div class='tempIcon'>" + "<img src='http://openweathermap.org/img/w/" + forecast[i].weather[0].icon);
            html.push(".png' alt=''></div>" + "<div class='conditions' id='castId'>" + '<span class="cond">' + forecast[i].weather[0].main);
            html.push("</span>: " + "<span>" + forecast[i].weather[0].description + '</span>' + "</div>");
            html.push("<div class='conditions'>" + "<span class='cond'>Humidity: </span>" + "<span>" + forecast[i].humidity + "&#37;</span></div>");
            html.push("<div class='conditions'>" + "<span class='cond'>Wind: </span>" + "<span>" + (Math.floor(forecast[i].speed)));
            html.push(" mph / " + getDirection(forecast[i].deg) + "</span></div>" + "<div class='conditions'>");
            html.push("<span class='cond'>Pressure: </span>" + "<span>" + forecast[i].pressure + "</span></div></div>");
        });

 $('.forecast').append(html.join(""));

jQuery循环遍历对象数组的麻烦

1 个答案: