jQuery如何选中所有类名相同的列表，统一隐藏超出前4项的元素？

问题原因 #

你所用的jQuery选择器$('.feature-list li:gt(3)')中，:gt()是对全局匹配到的所有li元素组成的集合统一计算索引，而非针对每个feature-list列表内部的li单独统计索引，所以才会出现仅第一个列表的超出项被隐藏的问题。

解决方法 #

方法1：遍历列表单独处理（无需修改原有HTML，适配你的现有逻辑）

直接替换原有JS代码即可：

// 默认隐藏每个列表超出前4项的内容
$('.feature-list').each(function() {
  $(this).find('li:gt(3)').hide();
});

$('.more-btn').click(function() {
  // 点击任意more按钮，展开两个列表的所有项
  $('.feature-list').each(function() {
    $(this).find('li:gt(3)').show();
  });
  // 可选：隐藏两个more按钮避免重复点击
  $('.more-btn').hide();
});

方法2：用CSS实现默认隐藏（更简洁高效）

先添加CSS样式：

/* 每个列表第5项及以后默认隐藏 */
.feature-list li:nth-child(n+5) {
  display: none;
}
/* 展开状态下显示所有项 */
.feature-list.is-expanded li:nth-child(n+5) {
  display: list-item;
}

JS可以简化为：

$('.more-btn').click(function() {
  $('.feature-list').addClass('is-expanded');
  $('.more-btn').hide();
});

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