JQ遍历实现的场景

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

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

场景要求

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

1.webp.jpg1.webp.jpg


场景实现

  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获取每个节点来进行赋值,所以说掌握遍历可以节省很多事情,但是可能会绕来绕去。


相关文章
|
4月前
|
JavaScript
jQ在元素的不同位置插入元素
jQ在元素的不同位置插入元素
|
4月前
|
JavaScript 前端开发 API
jq之选择器|2-2
jq之选择器|2-2
36 6
jq之选择器|2-2
|
4月前
|
JavaScript 前端开发 API
jq修改dom|2-6
jq修改dom|2-6
|
4月前
|
JavaScript 前端开发 Java
jq操作dom|2-5
jq操作dom|2-5
|
8月前
|
存储
CMake中遍历元素的技巧:foreach命令详解
CMake中遍历元素的技巧:foreach命令详解
553 1
|
8月前
Node 使用递归实现遍历所有文件
Node 使用递归实现遍历所有文件
78 0
|
JavaScript 索引
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
385 0
vue 数组处理= 循环--查找过滤--添加删除--去重[.every()/.some()/.find()/.filter()/.forEach()/.map()]
|
JavaScript 前端开发
Node.js:Array.prototype.sort数组排序的使用
Node.js:Array.prototype.sort数组排序的使用
155 0
|
索引
jq使用splice删除数组元素出错的解决方法
jq使用splice删除数组元素出错的解决方法
247 0