菜鸟教程
教程 jquery tutorial

遍历与筛选

jQuery 提供遍历和筛选的方法，可以对元素集合进行迭代处理和条件过滤，方便批量操作。

遍历方法

  • each() — 迭代匹配的元素集合，执行回调函数
js 
  $("li").each(function (index, element) {
    console.log(index, $(element).text());
  });
  • map() — 创建一个新的元素集合，对每个元素进行处理后返回新集合
js 
  var texts = $("li")
    .map(function () {
      return $(this).text().toUpperCase();
    })
    .get();

筛选方法

  • filter() — 从元素集合中筛选符合条件的元素
js 
  $("li").filter(".active");
  • not() — 排除符合条件的元素
js 
  $("li").not(".active");
  • first() — 选中第一个元素
js 
  $("li").first();
  • last() — 选中最后一个元素
js 
  $("li").last();

示例代码

在线代码演示
源码 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  $(document).ready(function () {
    // 遍历所有li，打印文本内容
    $("li").each(function (index) {
      console.log("第 " + index + " 个列表项：" + $(this).text());
    });
    // 筛选含有active类的li，变红色
    $("li").filter(".active").css("color", "red");
    // 排除active类的li，变灰色
    $("li").not(".active").css("color", "gray");
    // 第一个li加粗
    $("li").first().css("font-weight", "bold");
    // 最后一个li斜体
    $("li").last().css("font-style", "italic");
  });
</script>

<ul>
<li class="active">列表项1</li>
<li>列表项2</li>
<li class="active">列表项3</li>
<li>列表项4</li>
</ul>

相关内容