JQ遍历实现的场景

JQ实现天气预报数据绑定场景

场景要求

场景要求我们使用JQ将数据绑定到对于的位置上如下面两个图所示，从基础代码来看，我们需要使用JQ的遍历来简单地达到我们的预期目标，如果不使用JQ遍历的话就会造成我们需要一个盒子一个盒子地去赋值，造成代码冗余，这也是体现了JQ遍历的重要性。

场景实现

1. 请求数据，这里给我们提供了一个json文件的数据集，所以我们需要使用jq的get方法来获取

$.ajax({
        type:"GET",
        url:" /js/weather.json",
        dataType:"json",
 })
复制代码

1. 在获取到数据后就是考研我们对于JQ遍历的熟练程度，因为其html结构如下，这个时候我们需要考虑到这么去遍历如何高效地去将数据遍历到dom中

<div class="item" id="Monday">
       <img src="">
       <div class="item-mess">
            <div></div>
            <div></div>
            <div></div>
            <div>
                  <span></span>
                  <span></span>
             </div>
        </div>
</div>
复制代码

1. 绑定特定的主dom，因为我们的每相同的盒子都是由class=item绑定的，所以先定义变量绑定每个盒子

days = $(".item")
复制代码

1. 在绑定完主dom后，可以开始对获取来的数据进行循环遍历，其中在item下的节点也有特定的层次结构，所以需要我们去考虑这个问题，其中eq方法是JQ遍历中选择子项的函数，比如说下面我们选择了第i个盒子

day = days.eq(i)
复制代码

1. 下面是绑定图片问题，通过children，遍历到day节点下的图片img，并通过attr方法进行属性绑定

img = day.children("img")
img.attr("src",res[i].weather_icon)
复制代码

1. 因为在item节点下的其他数据还有一层item-mess包裹，所以我们再遍历到item-mess这里

item_mess = day.children(".item-mess")
复制代码

1. 因为在item-mess节点下又包含了几个盒子，所以我们再定义一个变量来表示这些盒子，之后就可以通过eq来该节点下的为赋class的盒子进行数据绑定

texts = item_mess.children()
texts.eq(0).text(res[i].weather)
texts.eq(1).text(res[i].temperature)
texts.eq(2).text(res[i].winp)
复制代码

1. 同样原理因为赋class值的盒子节点下还有两个span，所以我们需要通过上面赋值的texts 再向下children寻找span并通过eq来赋值

dates = texts.eq(3).children()
dates.eq(0).text(res[i].days)
dates.eq(1).t
复制代码

总结

从上面的代码来看，如果我们不使用jq遍历，我们需要为这几个盒子的所有的节点赋上class，再通过jq获取每个节点来进行赋值，所以说掌握遍历可以节省很多事情，但是可能会绕来绕去。