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


目录
打赏
0
0
0
0
69
分享
相关文章
k8s自定义controller三部曲之一:创建CRD(Custom Resource Definition)
通过自定义控制器开发深入理解k8s的控制器设计思想及其实现
956 0
k8s自定义controller三部曲之一:创建CRD(Custom Resource Definition)
听悟 + 魔笔,定制你的企业智能会议系统
本文介绍了基于阿里云魔笔平台的企业智能会议系统搭建方案。通过整合通义听悟的强大AI能力,该系统可实现音频视频处理、自动记录、实时翻译等功能,满足个性化定制、数据安全与高效集成的需求。
一文来带你了解 Flutter MaterialApp
一文来带你了解 Flutter MaterialApp
219 1
一文来带你了解 Flutter MaterialApp
深入解析数据库性能优化:策略与实践
【7月更文挑战第23天】数据库性能优化是一个复杂而持续的过程,涉及硬件、软件、架构、管理等多个方面。通过本文的介绍,希望能够为读者提供一个全面的性能优化框架,帮助大家在实际工作中更有效地提升数据库性能。记住,优化不是一蹴而就的,需要持续的观察、分析和调整。
闲话 .NET(5):.NET Core 有什么优势?
闲话 .NET(5):.NET Core 有什么优势?
183 0
重磅发布 | 阿里云发布《数据中台交付标准化》白皮书,促进数据中台高效高质量履约 原创 肖剑 阿里云研究院
编者按: 企业进行数字化建设是实现精细化运营和数字化创新发展的关键所在,数据中台建设是企业实现数智化转型的必经之路。在数据中台建设与交付过程中,存在专业度要求高、交付过程管控难、交付协同难等挑战,为应对这些挑战并实现数据中台交付,需要有一套数据中台交付的方法论、交付标准、交付工具和数字化交付工作台来指导、帮助企业和数据中台服务商来建设好数据中台,为企业的数字化转型提供数据咨询规划服务、数据资产建设服务和数据应用建设服务等,提升数据中台交付的效率和质量,降低规模化交付成本。
1070 0
重磅发布 | 阿里云发布《数据中台交付标准化》白皮书,促进数据中台高效高质量履约 原创 肖剑 阿里云研究院
Docker与DevOps的无敌组合,引爆你的创新潜能
Docker与DevOps的无敌组合,引爆你的创新潜能
268 0
登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问