javascript - 如何检查 JavaScript 中没有显示样式的第一个元素？

Question

当我过滤数据时，我得到了一个 li 元素的列表，我通过将显示设置为 none 来排除不需要的元素。我想检查第一个没有设置显示样式的元素我该怎么做：不显示的元素示例：

<li style="display: none;"><a href="#" data-key="81" data-value="Example 1">Data</a></li> 

没有显示无属性的元素示例：

<li style=""><a href="#" data-key="1" data-value="Example2">Example2</a></li>

我的 JavaScript 代码：

var liValue = $("#UlId").find('li:not([style*="display: none"])').val();

我怎样才能得到第一个可见的 li 。

标签： javascriptjquery

Answer 1

如果您只想要第一个可见的价值 find并且eq(0)是您的朋友。

var liValue = $("#UlId").find('li:not([style*="display: none"])').eq(0).find('a').text();
console.log(liValue);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="UlId">
  <li style="display: none;"><a href="#" data-key="81" data-value="Example 1">Data</a></li>
  <li style=""><a href="#" data-key="1" data-value="Example2">Example2</a></li>
  <li style=""><a href="#" data-key="2" data-value="Example3">Example3</a></li>
</ul>