当前位置:首页 > 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 插件、教程和代码示例的中文资源网站。以下是关于 jQuery 之家的一些有用信息: 网站内容 提供丰富的 jQuer…

jquery之家

jquery之家

jQuery之家资源推荐 jQuery之家(通常指提供jQuery相关资源的网站或社区)是开发者获取插件、教程和代码示例的重要平台。以下是几个与jQuery相关的优质资源网站: 1. jQuery官…

jquery获取

jquery获取

获取元素 使用jQuery选择器获取元素,通过CSS选择器或jQuery特定选择器定位目标元素。常见选择器包括ID选择器(#id)、类选择器(.class)、标签选择器(tag)等。示例: $('#…

jquery实现

jquery实现

以下是关于jQuery实现的常见应用场景及方法,分为核心功能模块说明: DOM操作 使用$()选择器获取元素后,可通过链式调用方法操作DOM: $('#element').html('新内容').…

jquery属性

jquery属性

jQuery 属性操作 jQuery 提供了多种方法来操作 HTML 元素的属性。这些方法可以用于获取、设置、修改或删除元素的属性。 获取属性值 使用 attr() 方法可以获取指定属性的值。例如,…

jquery 方法

jquery 方法

jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。以下是一些常用的 jQuery 方法及其用途: 选择器方法 $("selec…