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.
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>you can use this
$('li:visible:first')