我是否正确使用.is()来访问元素的ID?

时间:2017-01-03 23:35:47

标签: javascript jquery while-loop

这是天气应用程序的一部分我一直在重做,现在我想添加未来5天的预测。我在评论中写了我想要完成的事情,我觉得我走在正确的轨道上,但我不确定我是否正确使用Jquery的.is()方法

链接到JSON示例:https://darksky.net/dev/docs/forecast

$.getJSON(api, (data) => {
// console.log(data);
const weekly_forecast = data.daily.data;

    $("#currentTemp").append("<h4 id='tempData'>Currently<br> "+data.currently.temperature+"</h4>");
    $("#currentConditions").append("<h4>Conditions<br>"+data.currently.summary +"</h4>");
    $("#percipitationChance").append("<h4> Chance of Percipitation<br> " + data.currently.precipProbability +"%" + "</h4>");
            //  $("#reveal").on('click',() => { //click button
            //data.main.tempData //on click convert temperature to farenheight
            //  });
        $("#weekly_forecast div").each( () => { //loop through each div within weekly forecast
            const i = 1;                       //Intialize counter starting at 1, we already have day[0] displayed in current data
            while (i < 5) {                   //While my counter is less than 5 -> (for the next 5 days of the week)
                $(this).is(('#day_'+i)() => {   //Target the referenced element (current div in iterration)
                                                    //Append the inner html to reflect JSON data for day[i];
            });
            i++;                            //Add 1 to i and loop again unless i = 5
        }           
    });
});     

随附HTML:

    <!--Weekley Forecast-->
        <div class="flex-container" id="weekly_forecast">
            <div class="day" id="day_1">
                <h2></h2>
            </div>
            <div class="day" id="day_2">
                <h2></h2>
            </div>
            <div class="day" id="day_3">
                <h2></h2>
            </div>
            <div class="day" id="day_4">
                <h2></h2>
            </div>
            <div class="day" id="day_5">
                <h2></h2>
            </div>
        </div>

编辑:使用此for循环结束我的解决方案

                for (var i = 0; i < 6; i++) { //loop over the object's next 5 days
                    const weekly_forecast = data.daily.data;
                    $('#day_'+[i]).append("<h3>"+weekly_forecast[i].apparentTemperatureMax + "<br></h3><P>" + weekly_forecast[i].summary + "</p>");
                }

1 个答案:

答案 0 :(得分:0)

我真的认为你不需要使用“是”,因为你只是针对内部div ID:

$.getJSON(api, (data) => {
    // console.log(data);
    const weekly_forecast = data.daily.data;

        $("#currentTemp").append("<h4 id='tempData'>Currently<br> "+data.currently.temperature+"</h4>");
        $("#currentConditions").append("<h4>Conditions<br>"+data.currently.summary +"</h4>");
        $("#percipitationChance").append("<h4> Chance of Percipitation<br> " + data.currently.precipProbability +"%" + "</h4>");
                //  $("#reveal").on('click',() => { //click button
                //data.main.tempData //on click convert temperature to farenheight
                //  });
        for (var i = 1; i <6; i++) {
         $('#day_'+i).append(data[i]) // data[i] or data.forecast[i] or whatever you have your forecast data stored in your JSON
        }

    });