jQuery中遍历元素each

news/2024/7/10 23:34:54 标签: jquery, 前端, javascript

让我为大家介绍一下jQuery中each方法吧!
jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作,就需要用到遍历。
语法:$(“div”).each(function (index,domEle) { xxx;})

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
<script src="../js/jquery-1.8.3.min.js"></script>
<script>javascript">
    $("div").each(function(index,domEle){
    	//回调函数第一个参数一定是索引号可以自己指定索引号号名称
        console.log(index);// 0 1 2
        // 回调函数第二个参数一定是 dom元素对象 也是自己命名
        console.log(domEle);
    })
</script>

1.each()方法遍历匹配的每一个元素。主要用DOM处理。each每一个
2.里面的回调函数有2个参数: index 是每个元素的索引号; demEle 是每个DOM元素对象,不是jquery对象
3.所以要想使用jquery方法,需要给这个dom元素转换为iquery对象 $(domEle)

我们来做一个小例子 利用each给元素中的内容添加颜色

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
</body>
<script src="../js/jquery-1.8.3.min.js"></script>
<script>javascript">
    $(function(){
        // 声明一个数组 存颜色
        const arr = ["red","orange","green"]
        // 遍历div
        $("div").each(function(index,domEle){
            // 我们需要把domEle元素转换为jQuery对象
            $(domEle).css("color", arr[index]);
        })
    })
</script>

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!


http://www.niftyadmin.cn/n/5164386.html

相关文章

3D全景技术,为我们打开全新宣传领域

随着科技的发展&#xff0c;3D全景技术正在融入我们的生活&#xff0c;这种全新视觉体验方式为我们打开了一扇全新的宣传领域&#xff0c;可以让我们多方位、多视角地探索各个行业&#xff0c;无论是对教育、商业、还是其他领域&#xff0c;都产生了深远的影响。 3D全景技术结合…

搭载紫光展锐V510平台 移远通信RG500U-EA 5G模组获全球首个GCF认证

近日&#xff0c;搭载紫光展锐V510平台的移远通信工规级5G模组RG500U-EA顺利通过GCF认证&#xff0c;成为全球首款通过该认证的基于紫光展锐平台的5G模组。 GCF认证是一种国际性的产品一致性认证&#xff0c;该认证的通过&#xff0c;表明搭载紫光展锐V510的终端产品可满足不同…

Java Swing程序设计-18章

Java Swing程序设计-18章 1.Swing概论 Swing是用于创建图形用户界面&#xff08;GUI&#xff09;的一组API&#xff08;应用程序编程接口&#xff09;。Swing提供了丰富的组件&#xff0c;用于构建用户友好的界面&#xff0c;包括按钮、文本框、标签、列表、表格等。以下是Sw…

SAP ABAP基础语法-日期函数(九)

abap日期相关 日期的加减&#xff1a; BKK_ADD_MONTH_TO_DATE 根据当前时间如何找到上月的第一天和最后一天&#xff1f; CALL FUNCTION FIMA_DATE_CREATEEXPORTINGI_DATE SY-DATUMI_MONTHS -1I_SET_LAST_DAY_OF_MONTH XIMPORTINGE_DATE…

winform打包默认安装路径设置

点击安装程序的 Application Folder 修改属性中的 DefaultLocation

OpenCV入门7:图像形态学变换

形态学是一种针对图像形状和结构进行操作和分析的图像处理方法。在OpenCV中&#xff0c;提供了一些函数和方法用于执行形态学操作。下面将介绍一些常见的形态学操作及其在OpenCV中的实现方式。 膨胀&#xff08;Dilation&#xff09;&#xff1a; 膨胀操作可以扩展图像中的边…

MySQL大表数据导入到MongoDB

修改参数 &#xff0c;开启into outfile的功能 secure_file_priv/home/backups/mysql_outfile 重启数据库是参数生效 按条件导出MySQL数据 select * from receipt_receive_log where gmt_create > 2020-04-13 00:00:00 and gmt_create< 2020-07-13 00:00:00 INTO O…

C# WebSocket 服务器

*******************websocket服务器************************************** 第一步&#xff1a;创建HttpListener类&#xff0c;并启动监听&#xff1a; var listener new HttpListener(); listener.Prefixes.Add("http://10.10.13.140:8080/"); …