jQuery移除首个含hidden类子元素类名失效问题排查请求

我来帮你搞定这个问题！你的jQuery代码里有个容易踩的小坑——first()方法并不接受选择器参数，所以你写的.first('.hidden')根本不会按照预期筛选出带hidden类的第一个子元素，它只会直接取#find-data的第一个子元素，完全忽略后面的.hidden筛选条件，这就是代码失效的核心原因。

修正后的代码 #

$(document).on('click', '#find-button', function (e) {
  // 先筛选#find-data下带hidden类的直接子元素，再取第一个移除类
  $('#find-data').children('.hidden').first().removeClass('hidden');
});

为什么原来的代码不行？ #

你原来的写法：

$('#find-data').children().first('.hidden')

执行逻辑是：

1. 获取#find-data的所有直接子元素
2. 调用first()取第一个子元素（这里first()不接受参数，所以.hidden被直接忽略）
3. 尝试对这个第一个子元素做筛选，但已经晚了——不管它有没有hidden类都会被选中

而修正后的写法是先通过.children('.hidden')筛选出所有带hidden类的直接子元素，再用first()取其中第一个，这样就精准命中了你要操作的目标元素。

额外小建议 #

如果你的需求是每次点击按钮，都移除#find-data下第一个未显示的子元素（也就是带hidden类的第一个），那上面的代码完全没问题。如果是要移除按钮的下一个兄弟元素的hidden类，那可以简化成：

$(document).on('click', '#find-button', function (e) {
  $(this).next('.hidden').removeClass('hidden');
});

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