jQuery查找元素each
在使用jQuery进行DOM操作时，我们经常需要查找特定的元素并对其进行操作。jQuery提供了多种方法来查找元素，其中之一就是使用each函数。each函数可以遍历匹配的元素集合，并为每个元素执行相同的操作。
什么是jQuery？
jQuery是一个著名的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。使用jQuery，我们可以更加方便快捷地操作DOM，并且兼容各种浏览器。
查找元素
在jQuery中，我们可以使用不同的选择器来查找元素。以下是一些常用的选择器：
$("#id")：根据元素的id属性查找。$(".class")：根据元素的class属性查找。$("tag")：根据元素的标签名查找。$("selector1, selector2")：查找满足多个选择器条件的元素。$("parent > child")：查找某个父元素下的直接子元素。$("prev + next")：查找某个前一个兄弟元素后的直接下一个兄弟元素。$("prev ~ siblings")：查找某个前一个兄弟元素后的所有兄弟元素。
each函数
each函数可以遍历匹配的元素集合，并为每个元素执行相同的操作。该函数的语法如下：
$(selector).each(function(index, element) {
// 对每个元素执行的操作
});
selector：选择器，用于指定要遍历的元素集合。index：当前遍历的元素在集合中的索引。element：当前遍历的元素。
下面是一个使用each函数的示例：
$("ul li").each(function(index, element) {
console.log("遍历到第" + (index+1) + "个li元素");
console.log("当前li元素的内容是：" + $(this).text());
});
上述代码会遍历所有ul元素下的li子元素，并输出每个li元素的索引和内容。
示例应用
假设我们有一个包含多个商品的列表，每个商品都有一个价格。我们想要计算所有商品的总价格并显示在页面上。可以使用以下代码实现：
var total = 0;
$(".item .price").each(function(index, element) {
var price = parseFloat($(this).text());
total += price;
});
$("#total-price").text("总价格：" + total.toFixed(2));
上述代码会遍历所有类名为item的元素下的类名为price的子元素，并将每个子元素的价格累加到total变量中。最后，将总价格显示在id为total-price的元素中。
总结
通过使用jQuery的each函数，我们可以方便地遍历元素集合，并对每个元素执行相同的操作。这为我们在处理DOM操作时提供了更加便捷的方式，同时提高了代码的可读性和可维护性。
代码示例的饼状图如下所示（使用mermaid语法）：
pie "id选择器" : 30 "class选择器" : 20 "标签选择器" : 10 "多个选择器" : 15 "父子选择器" : 10 "兄弟选择器" : 15
