jQuery each() 便利

简介: jQuery each() 便利

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> li { width: 200px; height: 200px; margin: 20px; float: left; list-style: none; text-align: center; font: 50px/200px 'simsun'; background-color: pink; } </style> <script src="jquery-3.4.1.js"></script> <script> $(document).ready(function () { $('ul li').each(function (index, el) { $(el).css('opacity', (index+1)/10); }) }) </script> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> </body> </html>


  • demo 效果:





相关文章
|
7月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
JavaScript 前端开发
Jquery的$.each()如何使用
Jquery的$.each()如何使用
88 0
|
JSON JavaScript 前端开发
JQuery数组遍历 - $.each(),$().each()和forEach()
JQuery数组遍历 - $.each(),$().each()和forEach()
190 0
|
存储 JavaScript 前端开发
【前端每日一问002】jquery中each与data方法的用法与概念
【前端每日一问002】jquery中each与data方法的用法与概念
117 0
|
JavaScript 前端开发 索引
|
JavaScript
jQuery链式编程,each方法,多库共存
jQuery链式编程,each方法,多库共存
116 0
jQuery链式编程,each方法,多库共存
|
JavaScript Java API
Java Web——jQuery中的第二组函数(remove、empty、append、html、each)与on()绑定事件
Java Web——jQuery中的第二组函数(remove、empty、append、html、each)与on()绑定事件
Java Web——jQuery中的第二组函数(remove、empty、append、html、each)与on()绑定事件
|
JavaScript 前端开发 索引
JavaScript专题之jQuery通用遍历方法each的实现
JavaScript 专题系列第十一篇,讲解 jQuery 通用遍历方法 each 的实现
192 0
JavaScript专题之jQuery通用遍历方法each的实现
|
JavaScript
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法
219 0
jQuery的addClass、siblings、removeClass、each、html、eq、show/hide用法