如何在JavaScript中查找第一个未设置display:none样式的li元素

首先明确你原有代码的两处核心问题：

• li属于普通DOM元素，没有val()方法，该方法仅适用于input、select等表单元素，用来获取表单值
• 你选中了所有符合条件的li元素，但没有筛选出第一个匹配项；同时手动匹配style属性的方案容错率低，若style属性中display:none前后有空格、或者隐藏是通过CSS类设置的，该选择器就会失效。

jQuery内置了:visible选择器专门用来匹配可见元素，会自动过滤所有设置了display:none的元素，不管隐藏是行内样式还是类样式设置的，都可以准确识别，正确实现代码如下：

// 获取第一个可见的li元素
const firstVisibleLi = $('#UlId').find('li:visible').first()

// 示例：获取li内a标签的文本内容
const liText = firstVisibleLi.find('a').text()
// 示例：获取li内a标签的data-value属性值
const dataValue = firstVisibleLi.find('a').data('value')

如果你的场景中隐藏逻辑只有行内设置display:none这一种情况，也可以基于你原来的选择器调整：

const firstVisibleLi = $("#UlId").find('li:not([style*="display: none"])').first()

注意：使用前建议先判断元素是否存在，避免所有li都隐藏时后续逻辑报错：

if (firstVisibleLi.length) {
  // 存在可见li，执行后续逻辑
}

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