How to check for first element in JavaScript that has no style of display none?-CodePudding

I have got a list of li elements as I filter data I exclude the unneeded elements by setting the display to none. I would like to check for the first element that has no style of display set to it how can I do this: Example of element with display none:

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

Example of element that has no attribute of display none:

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

My JavaScript Code:

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

How can I get the first li that is visible.

CodePudding user response：

If you only want first visible value find and eq(0) is your friend.

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>

CodePudding user response：

you can use this

$('li:visible:first')