JQ遍历实现的场景

「这是我参与2022首次更文挑战的第23天，活动详情查看：2022首次更文挑战」

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

场景要求

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

场景实现

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

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

2. 在获取到数据后就是考研我们对于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>
   复制代码

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

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

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

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

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

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

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

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

7. 因为在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)
   复制代码

8. 同样原理因为赋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获取每个节点来进行赋值，所以说掌握遍历可以节省很多事情，但是可能会绕来绕去。