当前位置:首页 > 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/。该网站提供以下核心内容: 下载 jQuery:提供最新版本的 jQuery 库(压缩版和未压缩版),支持直…

jquery 图表

jquery 图表

jQuery 图表库推荐 jQuery 本身不直接提供图表功能,但可以通过插件或集成其他库实现图表绘制。以下是几种常用的 jQuery 图表解决方案: Chart.js 集成 Chart.j…

jquery 滑块

jquery 滑块

jQuery 滑块实现方法 使用 jQuery 实现滑块功能可以通过多种方式完成,包括使用原生 jQuery 或结合插件(如 jQuery UI)。以下是几种常见实现方法: 使用 jQuery UI…

jquery 属性

jquery 属性

jQuery 属性操作 jQuery 提供了一系列方法来获取、设置和操作 HTML 元素的属性。以下是常用的属性操作方法: attr() 方法 用于获取或设置元素的属性值。获取属性时,传入属性名;设…

jquery鼠标

jquery鼠标

jQuery 鼠标事件处理 jQuery 提供了丰富的鼠标事件处理方法,可以方便地响应用户的鼠标操作。以下是常见的鼠标事件及其用法: 鼠标点击事件 click(): 鼠标单击时触发 dblclic…

jquery 列表

jquery 列表

jQuery 列表操作 jQuery 提供了多种方法来操作 HTML 列表(如 <ul> 或 <ol>)。以下是一些常见的操作方式: 动态添加列表项 使用 append()…