詳解jQuery-each()方法

來源：懂視網責編：小采時間：2020-11-27 22:00:01

詳解jQuery-each()方法

詳解jQuery-each()方法:jquery中有隱式迭代，不需要我們再次對某些元素進行操作。但是如果涉及到不同元素有不同操作，需要進行each遍歷。本文利用10個li設置不同的透明度的案例，對each方法進行說明。語法： $(元素).each(function(index,element){ }); 參數in

推薦度：

點擊下載本文 文檔為doc格式

導讀詳解jQuery-each()方法:jquery中有隱式迭代，不需要我們再次對某些元素進行操作。但是如果涉及到不同元素有不同操作，需要進行each遍歷。本文利用10個li設置不同的透明度的案例，對each方法進行說明。語法： $(元素).each(function(index,element){ }); 參數in

jquery中有隱式迭代，不需要我們再次對某些元素進行操作。但是如果涉及到不同元素有不同操作，需要進行each遍歷。本文利用10個li設置不同的透明度的案例，對each方法進行說明。

語法：

$(元素).each(function(index,element){ });

參數index：表示元素索引，在本例中是0-9

參數element：表示對象，在本例中是每個li

案例效果：

代碼如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 li{
 width: 100px;
 height: 100px;
 background-color: green;
 list-style: none;
 float: left;
 margin-left: 10px;
 }
 </style>

 <script src="jquery-1.12.2.js"></script>
 <script type="text/javascript">
 $(function(){
 //頁面加載后,讓每個li的透明度發生改變
 $("li").each(function(index,element){
 //第一個參數是索引,第二個參數是對象
 $(element).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>

以上所述是小編給大家介紹的jQuery-each()方法詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

詳解jQuery-each()方法

推薦度：

點擊下載本文 文檔為doc格式

標簽：方法 () each

熱門焦點

詳解jQuery-each()方法

詳解jQuery-each()方法

詳解jQuery-each()方法

最新推薦

猜你喜歡

熱門推薦