如何在 jQuery 中迭代列表

在 jQuery 中，我们可以很方便地迭代列表元素。下面是一些常用的方法和示例：

each() 方法

each() 方法用于迭代一个 jQuery 对象的每个元素。它接受一个函数作为参数，该函数将在每个元素上被调用。函数的参数是元素的索引和相应的 DOM 元素。

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

示例解析

上面的代码将选中所有的 ul li 元素，并在每个元素上调用一个函数。该函数会将元素的索引和相应的 DOM 元素输出到控制台。

map() 方法

map() 方法用于将一个 jQuery 对象的每个元素转换为另一组值。它接受一个函数作为参数，该函数将在每个元素上被调用。函数的参数是元素的索引和相应的 DOM 元素。函数应该返回一个新的值，该值将被收集到结果数组中。

var listItems = $('ul li').map(function(index, element) {
  return $(element).text();
});

console.log(listItems);  // ["Item 1", "Item 2", "Item 3", "Item 4"]

示例解析

上面的代码将选中所有的 ul li 元素，并在每个元素上调用一个函数。该函数将每个元素的文本提取出来并返回，然后这些文本将被收集到一个数组中，并输出到控制台。

filter() 方法

filter() 方法用于筛选一个 jQuery 对象的元素。它接受一个函数作为参数，该函数将在每个元素上被调用。函数的参数是元素的索引和相应的 DOM 元素。函数应该返回一个布尔值，以指示当前元素是否应该保留在结果中。

var oddItems = $('ul li').filter(function(index, element) {
  return index % 2 === 0;
});

console.log(oddItems);  // [li.item-1, li.item-3]

示例解析

上面的代码将选中所有的 ul li 元素，并在每个元素上调用一个函数。该函数将返回 true 或 false，以指示当前元素是否应该保留在结果中。在本例中，我们返回索引为偶数的元素，因此我们得到了乘以 2 为奇数的元素。

以上就是在 jQuery 中迭代列表的一些常用方法和示例。希望这篇文章对你有所帮助。