详解 jQuery-each() 方法
jQuery-each() 方法用于遍历 jQuery 对象中的所有元素，对每个元素执行指定的函数。该方法返回遍历的 jQuery 对象本身，因此可以使用链式调用。
语法
$(selector).each(function(index,element))
参数说明
- function(index,element)：必需。表示对每个匹配元素所执行的函数。需要注意的是，这个函数可以接收两个参数。
- index：当前元素在 jQuery 对象中的索引值。
- element：当前被遍历的 DOM 元素。
使用示例1
下面代码是一段简单的使用 jQuery 的 each() 方法的例子，可以在控制台打印每个匹配元素的 tagName。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery-each() 方法示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<script>
$("li").each(function(index, element) {
console.log($(element).prop("tagName"));
});
</script>
</body>
</html>
使用示例2
下面代码是一个根据输入的文本内容，返回符合条件的元素的例子，它使用了 jQuery 的 each() 方法和 filter() 方法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery-each() 方法示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<input type="text" id="input-search">
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>其他项</li>
</ul>
<script>
$("#input-search").on("input", function() {
var search = $(this).val().toLowerCase();
$("li").each(function(index, element) {
var text = $(element).text().toLowerCase();
if (text.indexOf(search) >= 0) {
$(this).show();
} else {
$(this).hide();
}
});
});
</script>
</body>
</html>
在上面的例子中，当输入框中的文本发生变化时，遍历所有的列表项，使用 filter() 方法返回符合条件的元素，然后对于不符合条件的元素使用 hide() 方法进行隐藏，匹配的元素则通过 show() 方法进行展示。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解jQuery-each()方法 - Python技术站
微信扫一扫 
支付宝扫一扫 