<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> ul>li { width: 100px; height: 100px; background-color: pink; display: block; margin-top: 10px; } </style> </head> <body> <ul> <li>01</li> <li>02</li> <li>03</li> <li>04</li> <li>05</li> <li>06</li> <li>07</li> <li>08</li> <li>09</li> <li>10</li> </ul> <script src="jquery-3.2.1.js"></script> <script> $(function () { // 遍历方法1 // for (var index = 0; index < $("ul>li").length; index++) { // $("ul>li").eq(index).css("opacity", (index+1)/10); // } // 遍历方法2 $("ul>li").each(function (index, element) { $("ul>li").eq(index).css("opacity", (index+1)/10); }); }); </script> </body> </html>