jQuery中的each()方法用於指定要為每個匹配元素運行的函數。
用法:
$(selector).each(function(index, element))
參數:此方法接受強製性的單個參數函數(索引,元素)。它用於為每個匹配的元素運行。它包含兩個參數。
- index:它保存選擇器元素的索引位置。
- element:它保存當前元素。
範例1:本示例使用each()方法顯示每個段落元素。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Misc each() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>jQuery each() Method</h2>
<button>Click</button>
<p>Geeks1</p>
<p>Geeks2</p>
<p>Geeks3</p>
<!-- Script use each() method -->
<script>
$(document).ready(function() {
$("button").click(function() {
$("p").each(function() {
alert($(this).text())
});
});
});
</script>
</body>
</html>
輸出:
- 在點擊按鈕之前
- 單擊按鈕後
範例2:本示例使用each()方法顯示段落元素。
<!DOCTYPE html>
<html>
<head>
<title>
jQuery Misc each() Method
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body style="text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<h2>jQuery each() Method</h2>
<button>Click</button>
<p>Geeks1-Geeks2-Geeks3</p>
<div style="color:lightgreen;"></div>
<!-- Script use each() method -->
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").each(function(){
$("div").text($(this).text())
});
});
});
</script>
</body>
</html>
輸出:
- 在點擊按鈕之前
- 單擊按鈕後
相關用法
- JQuery Misc get()用法及代碼示例
- JQuery Misc param()用法及代碼示例
- JQuery Misc toArray()用法及代碼示例
- JQuery is()用法及代碼示例
- JQuery get()用法及代碼示例
- JQuery add()用法及代碼示例
- JQuery before()用法及代碼示例
- JQuery css()用法及代碼示例
- JQuery off()用法及代碼示例
- JQuery die()用法及代碼示例
- JQuery slideDown()用法及代碼示例
- JQuery ajaxSend()用法及代碼示例
- JQuery slideToggle()用法及代碼示例
- JQuery ajaxSuccess()用法及代碼示例
注:本文由純淨天空篩選整理自SHUBHAMSINGH10大神的英文原創作品 jQuery | Misc each() Method。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。