当前位置:首页 > 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官网(https://jquery.com/),点击页面中的“Download”按钮。提供两个版本选择: Production版本:压缩后的…

jquery 之家

jquery 之家

jQuery 之家是一个专注于 jQuery 相关资源的中文网站,提供插件、教程、代码示例等内容。以下是相关信息整理: jQuery 之家网站内容 该网站通常包含以下资源: jQuery…

jquery.js

jquery.js

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,用于简化 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它的设计宗旨是“Write Less, Do Mor…

jquery插件库

jquery插件库

jQuery插件库推荐 jQuery插件库提供了丰富的扩展功能,帮助开发者快速实现常见的前端交互效果。以下是一些常用的jQuery插件库和资源: 1. 官方jQuery插件注册中心jQuery P…

jquery库

jquery库

jQuery 库简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。其核心特点是“Write Less, Do More”,…

jquery 菜鸟

jquery 菜鸟

jQuery 入门指南 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下内容适合初学者快速上手。 引入 jQuery 在…