为何无法像jQuery.each()一样在jQuery.first()中传入函数？

你碰到的这个问题其实是因为 jQuery 里 .each() 和 .first() 的设计定位完全不同，咱们掰扯清楚：

• .each() 是一个遍历执行方法，它的核心作用就是遍历 jQuery 集合里的每一个元素，然后对每个元素执行你传入的回调函数，所以它天生就需要接收一个函数参数来完成遍历逻辑。这也是为什么 $(this).each(function() { /* 操作 */ }) 能正常工作的原因。

• 而 .first() 只是一个筛选方法，它的功能很简单：把当前的 jQuery 集合缩小到只包含第一个匹配的元素，然后返回这个新的 jQuery 对象。它从设计上就没有接收回调函数的参数，所以你写 $(this).first(function() { /* 操作 */ }) 自然不会生效——这个方法根本不知道该怎么处理你传的函数。

可行的解决方案 #

1. 你一开始想到的变通写法 $(this).first().each(function() { /* 操作 */ }) 是完全有效的，因为先通过 .first() 拿到第一个元素的 jQuery 对象，再用 .each() 去执行回调（这里 each 只会运行一次，刚好对应第一个元素）。

2. 不过更简洁的方式其实是直接使用 .first() 返回的对象，不用绕 .each()：

   • 如果是要对这个元素执行操作，直接链式调用就行：

     $(this).first().addClass('highlight').text('第一个元素');
     

   • 如果是要把这个元素传给某个自定义函数，直接把它当参数传进去：

     handleFirstElement($(this).first());
     

最后唠两句 #

你后来意识到的 function($(element).first()); 思路完全正确！开发中确实容易因为习惯了某类方法的调用模式（比如 each 传回调），而忽略了不同 API 的设计逻辑。jQuery 的方法分很多类：遍历类、筛选类、操作类，它们的参数规则差异很大，遇到这类问题时，回忆下方法的核心功能就能理清啦～

内容的提问来源于stack exchange，提问作者mike35x95x1