JS——jquery遍历

最新推荐文章于 2024-04-26 15:49:21 发布
最新推荐文章于 2024-04-26 15:49:21 发布
阅读量237 收藏
点赞数
分类专栏： Js H5 学习-总结-转载
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qlwangcong518/article/details/86518171
版权
学习-总结-转载 同时被 3 个专栏收录
136 篇文章 0 订阅
订阅专栏
H5
127 篇文章 2 订阅
订阅专栏
Js
111 篇文章 1 订阅
订阅专栏

描述：

用jquery实现数据的遍历

实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="node_modules/jquery/dist/jquery.js"></script>
</head>
<body>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <script>
        var goodsData=[
            {id:1001,icon:"img/a.jpg",
info:"東格 P20 4R/6 230g高光面照片纸/喷墨打印相片纸/相纸 100张装",
initPrice:"￥24.9",nowPrice:"¥7.9",soldOut:0.64},
            {id:1002,icon:"img/b.jpg",
info:"1.5米*1.8米宝宝爬行垫加厚爬爬垫防潮泡沫地垫婴儿童游戏地毯家用客厅",
initPrice:"￥59.9",nowPrice:"¥18.8",soldOut:0.87},
            {id:1003,icon:"img/c.jpg",
info:"【钜惠疯抢！足量一盒50贴】【买三送一，6盒一疗程】正宗艾草养生足",
initPrice:"￥99",nowPrice:"¥29.9",soldOut:0.95},
            {id:1004,icon:"img/d.jpg",
info:"Jackscool加士酷投影仪家用办公全高清1080p智能无线手机投影机4K激",
initPrice:"￥2698",nowPrice:"¥1099",soldOut:0.22}
        ];
        /*
        *  $.each 遍历，第一个参数是要遍历的对象或者数组
        *  第二个参数是一个回调函数，这个函数中也有两个参数
        *  如果是数组，这两个参数分别代表下标和值
        *  如果是对象，这两个参数分别代表key和值
        *  返回原数组或者原对象，中间不使用return
        *  回调函数中的this是item
        *
        *  除了可以遍历数组和对象，也可以遍历jQuery对象
        *
        * jQuery对象.each(function(){
        *       ..内容
        * })
        * 这是遍历jQuery对象
        * */
      /*var arr= $.each(goodsData,function (index,item) {
          console.log(this,index,item);
        });
        console.log(arr);*/
      /*var obj=goodsData[0];
      $.each(obj,function (key,value) {
          console.log(this,key,value);
      })*/

//      $.each(goodsData,(index,item)=>console.log(item));


//        $.each($("span"),(index,item)=>$(item).text(index));
        
        /*$.each($("span"),function (index,item) {
            $(item).text(index);
        })*/

        /*$("span").each(function (index,item) {
            $(item).text(index);
        })*/
//        $("span").each((index,item)=>{$(item).text(index);console.log(this)});
    </script>
</body>
</html>

 

SSSkyCong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery 遍历
ivenqin的博客
08-12 262
本节我们学习 jQuery 的遍历。什么是遍历呢？遍历是指沿着某条搜索路线，依次对树中每个节点均做一次访问。访问结点所做的操作依赖于具体的应用问题， 具体的访问操作可能是检查节点的值、更新节点的值等。不同的遍历方式，其访问节点的顺序是不一样的。遍历是适用于多元素集合的情况，例如遍历数组、遍历集合等。 jQuery 中的遍历其实就是根据其相对于其他元素的关系来查找 HTML 元素，以某项选择开始，并沿着这个选择移动，直到抵达所需要的元素为止，这一过程称为遍历。 遍历DOM jQuery 提供了多种遍历 DO
jQuery 遍历方法总结
忧郁的蛋的专栏
03-16 8026
5、each()，用于为每个匹配元素执行函数；在部分浏览器中不管用可以用prop，如果只是判断可以用$(this).find("ul>li>:checkbox:eq(" + i + ")").is(":checked");nextUntil()方法，主要用于获得指定元素的下一个同级元素，这个同级元素必须为指定元素与nextUntil()方法所设置元素之间的元素。prevUntil()方法，主要用于获得指定元素的上一个同级元素，这个同级元素必须为指定元素与prevUntil()方法所设置元素之间的元素。
jQuery遍历节点的方法
zhang20040217的博客
04-26 400
3、**.parentsUntil()**：获取元素的所有祖先元素，直到遇到匹配的选择器为止。11、**.prevUntil()**：获取元素之前的所有同胞元素，直到遇到匹配的选择器为止。8、**.nextUntil()**：获取元素之后的所有同胞元素，直到遇到匹配的选择器为止。2、**.parents()**：获取元素的所有祖先元素，直到（但不包括）DOM树的顶部。12、**.find()**：获取元素的后代元素，根据提供的选择器进行过滤。10、**.prevAll()**：获取元素之前的所有同胞元素。
JQuery遍历方式
you4580的专栏
03-22 820
false:如果当前function返回为true，则结束本次循环，继续下次循环(continue)1. jquery对象.each(function(index,element){});true:如果当前function返回为false，则结束循环(break)。element：就是集合中的每一个元素对象。jq对象.each(callback)index:就是元素在集合中的索引。this：集合中的每一个元素对象。for(元素对象 of 容器对象)2. jq的遍历方式。2. jq的遍历方式。
jQuery的遍历
克豪的博客
03-19 691
jQuery对象本身就是数组对象，通过jQuery选择器获得的都是满足该选择器条件的元素对象的集合体。因此常常需要对jQuery对象进行遍历。 1. 原始方式遍历 语法 for(var i=0;i<元素数组.length;i++){ 元素数组[i]; } 代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> &l
动态调用css文件——jquery的应用
10-31
标题中的“动态调用css文件——jquery的应用”指的是利用JavaScript库jQuery来实现在网页中动态加载或切换CSS样式表的功能。这种技术对于增强用户体验、实现主题切换或个性化定制有着重要作用。下面将详细介绍这个...
2014-10-04-深入理解jQuery（1）——jQuery对象1
08-04
jQuery的这种设计思路极大地推动了JavaScript在Web开发中的应用，简化了前端代码，提高了开发效率。通过深入理解jQuery对象的创建、结构和原型，开发者可以更好地运用jQuery库，编写出高效、优雅的前端代码。
ASP.NET源码——JQuery功能测试源码.zip
10-10
而jQuery则是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互。在"ASP.NET源码——JQuery功能测试源码.zip"这个压缩包中，我们很可能会找到一些示例代码，用于展示如何在ASP.NET...
jQuery 1.5 遍历xml节点属性
02-16
本文将详细讲解如何在jQuery 1.5版本中遍历XML节点属性，结合给定的资源——一个名为"test.html"的HTML文件和"jquery-1.5.js"的jQuery库。 首先，理解XML（Extensible Markup Language）是一种标记语言，用于存储和...
网页模板——jQuery 日期时间输入格式插件.zip
11-22
jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。jQuery的目标是使JavaScript编程变得简单而高效，通过封装JavaScript的复杂性，提供了一套简洁易用的API。 二、...
Jquery遍历元素
qq_43781887的博客
07-12 4975
在讲这个之前，建议先看一下jquery的隐式迭代，这个就不多说了，隐式迭代的缺点在于它只能集体进行操作不能只针对某个元素进行操作，可以看下面的代码： 如果想要依次对遍历的元素进行操作需要用each方法，语法是：$('div').each(function(index,domEle){})1.each()方法遍历匹配每一个元素。2.里面的回调函数有两个参数分别是index和domEle，index是每个元素的索引号，domEle是每个DOM元素对象，不是jquery对象，所以如果要用jquery的方法必须
jQuery 遍历对象
m0_67458498的博客
03-28 4200
遍历对象 $.each(对象，function(k 对象属性变量，v对象属性值变量） var cat={ name:'kitty'; age:5 climb:function(){ console.log('在爬树') } $.each (cat,function(k,v){ console.log(k+':'+v); }) 遍历数组 $.each(数组，function(k元素下标变量，v元素值变量{});) var color=['red','blu
jquery--遍历
m0_72694993的博客
11-04 1239
children 方法和 find 方法都是用来查找元素的子元素的，区别是 children 只能获取元素的儿子节点，而 find 方法可以获取元素的所有符合条件的后代节点。它的参数有两种，当为选择器时，我们会通过选择器来过滤不符合条件的元素；在 jQuery 中使用 hasClass 方法可以用来判断指定元素是否包含该类名的元素。在 jQuery 中可以使用 is 方法来判断指定元素中是否有符合条件的存在。方法是用来查找指定元素的所有祖先元素的。方法是用来查找指定元素的父元素的。3.所有兄弟元素查找。
JQuery（五） -- JQuery对象的“遍历操作”
PUYALEI的博客
05-13 712
i < 容器对象长度;$.each(容器对象,function(index,ele){容器对象.each(function(index,ele){for(ele of 容器对象){
jQuery遍历（树遍历）
m0_59329828的博客
01-24 1020
获得匹配元素集合中每个元素的直接子元素，选择器选择性筛选。
基于卷积神经网络的食物识别及实现.pdf
最新发布
07-22
在超市无人结算服务中，使用电子标签对部分货物如水果、蔬菜等进行结算的成本过高、便捷性不高，至今依然采用人工结算的方式。 针对这一问题，本文提出了基于卷积神经网络的食物识别方法。 通过自建水果数据集来训练卷积神经网络分类模型；基于训练后的模型构建可视化平台进行食物识别。 实验结果表明，利用卷积神经网络的食物识别的预测准确率 为 ９６．３４％。
js table 生成序号_jQuery——动态给表格添加序号
05-26
2. 使用 jQuery 遍历表格中的每一行，为每一行添加序号。 下面是一个示例代码： ```html 姓名 年龄 性别 序号 张三 <td>20 男 <td></td> 李四 <td>25 女 <td></td> 王五 <td>...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值