当前位置:首页 > jquery

jquery遍历

2026-01-13 17:11:44jquery

jQuery遍历方法

jQuery提供了多种遍历DOM元素的方法,可以根据需求选择合适的方式操作元素集合。

each()方法

each()方法用于遍历jQuery对象中的每个元素,并对每个元素执行回调函数。回调函数接收两个参数:索引和当前DOM元素。

$('li').each(function(index, element) {
  console.log(index + ': ' + $(element).text());
});

find()方法

find()方法在当前匹配元素集合的后代中查找符合选择器的元素。它会沿着DOM树向下搜索。

$('ul').find('li').css('color', 'red');

children()方法

children()方法只获取匹配元素的直接子元素,可以传入选择器进行过滤。

$('div').children('p').addClass('highlight');

parent()和parents()方法

parent()获取每个匹配元素的直接父元素,parents()获取所有祖先元素。

jquery遍历

$('span').parent().css('border', '1px solid black');
$('span').parents('div').addClass('ancestor');

siblings()方法

siblings()方法获取匹配元素的所有兄弟元素,不包括自己。

$('li.active').siblings().removeClass('highlight');

next()和prev()方法

next()获取匹配元素集合中每个元素的下一个兄弟元素,prev()获取前一个兄弟元素。

$('li.active').next().addClass('next-item');
$('li.active').prev().addClass('prev-item');

filter()方法

filter()方法从匹配元素集合中筛选出符合选择器或通过函数测试的元素。

jquery遍历

$('div').filter('.special').hide();
$('div').filter(function(index) {
  return $(this).hasClass('special');
});

not()方法

not()方法与filter()相反,排除匹配选择器或通过函数测试的元素。

$('div').not('.special').show();

first()和last()方法

first()获取匹配元素集合中的第一个元素,last()获取最后一个元素。

$('li').first().addClass('first-item');
$('li').last().addClass('last-item');

eq()方法

eq()方法从匹配元素集合中获取指定索引位置的元素,支持负数索引。

$('li').eq(2).addClass('third-item');
$('li').eq(-1).addClass('last-item');

链式遍历

jQuery方法支持链式调用,可以组合多个遍历方法实现复杂操作。

$('ul')
  .find('li')
  .filter(':even')
  .css('color', 'blue')
  .end()
  .filter(':odd')
  .css('color', 'green');

这些方法提供了灵活的方式来遍历和操作DOM元素,根据具体需求选择合适的方法组合可以提高代码效率和可读性。

标签: 遍历jquery
分享给朋友:

相关文章

jquery文档

jquery文档

以下是关于 jQuery 文档的核心内容和资源整理,便于快速查阅和使用: jQuery 官方文档 官网地址:jQuery Official Documentation 内容分类:API 参考…

jquery加载

jquery加载

jQuery 加载方法 使用 CDN 加载 jQuery 推荐通过公共 CDN(如 Google、Microsoft 或 jQuery 官方)加载,速度快且可能已被浏览器缓存。 <…

加载jquery

加载jquery

加载 jQuery 的方法 通过 CDN 加载 推荐使用官方或公共 CDN(内容分发网络)加载 jQuery,速度快且稳定。将以下代码添加到 HTML 文件的 <head> 或 <b…

使用jquery

使用jquery

引入jQuery库 在HTML文件中通过<script>标签引入jQuery库。可以从CDN加载,例如: <script src="https://code.jquery.com/…

jquery循环

jquery循环

jQuery 循环方法 jQuery 提供了多种循环方法,适用于不同的场景,包括遍历 DOM 元素、数组或对象。以下是常见的 jQuery 循环方式: each() 方法 each() 是 jQue…

jquery 控件

jquery 控件

jQuery 控件概述 jQuery 控件是基于 jQuery 库开发的交互式 UI 组件,用于增强网页功能。这些控件通常提供表单元素、数据展示、导航等功能,简化开发流程。 常用 jQuery 控件…