jquery 过滤

jQuery 过滤方法

jQuery 提供了多种过滤方法，用于从一组匹配的元素中筛选出符合特定条件的子集。以下是一些常用的过滤方法：

filter()

filter() 方法根据选择器或函数筛选元素集合。

语法：

$("selector").filter(criteria)

示例：

// 选择所有 div 元素，然后筛选出带有 class 'highlight' 的元素
$("div").filter(".highlight").css("background-color", "yellow");

函数过滤：

$("div").filter(function(index) {
  return index % 2 === 0; // 筛选索引为偶数的元素
});

not()

not() 方法排除匹配选择器或函数的元素。

语法：

$("selector").not(criteria)

示例：

// 选择所有 div 元素，排除带有 class 'exclude' 的元素
$("div").not(".exclude").css("border", "1px solid red");

has()

has() 方法筛选包含特定子元素的元素。

语法：

$("selector").has(childSelector)

示例：

// 选择所有包含 span 子元素的 div 元素
$("div").has("span").css("color", "blue");

eq()

eq() 方法根据索引筛选元素。

语法：

$("selector").eq(index)

示例：

// 选择第三个 div 元素
$("div").eq(2).css("font-weight", "bold");

first() 和 last()

first() 和 last() 分别筛选第一个和最后一个元素。

示例：

// 选择第一个 div 元素
$("div").first().css("text-decoration", "underline");

// 选择最后一个 div 元素
$("div").last().css("text-decoration", "overline");

slice()

slice() 方法根据索引范围筛选元素。

语法：

$("selector").slice(start, end)

示例：

// 选择索引 1 到 3 的 div 元素（不包括 3）
$("div").slice(1, 3).css("background-color", "lightgray");

链式过滤方法

jQuery 的过滤方法可以链式调用，以实现更复杂的筛选逻辑。

示例：

$("div")
  .filter(".highlight")
  .not(".exclude")
  .css("color", "green");

使用 find() 和 children() 进行过滤

find() 和 children() 虽然不是直接的过滤方法，但常用于在子元素中筛选。

示例：

// 在所有 div 元素中查找带有 class 'item' 的子元素
$("div").find(".item").css("border", "1px dashed black");

// 在所有 div 元素中筛选直接子元素中的 span 元素
$("div").children("span").css("font-style", "italic");

自定义过滤函数

通过传递函数给过滤方法，可以实现更灵活的筛选逻辑。

示例：

$("div").filter(function() {
  return $(this).text().length > 10; // 筛选文本长度大于 10 的 div 元素
}).css("background-color", "pink");