jquery - select first element which doesn't have "display:none"

Question

<td class="profile">
     <% var usedColors = ViewData["usedColors"] as string[]; %>
     <a class="profile-color" href="#" style="background: #c00; <% if (usedColors.Contains("#c00") && Model.Color != "#c00") {%>display:none<% }%>" id="color-c00">Color1</a>
     <a class="profile-color" href="#" style="background: #3491c2; <% if (usedColors.Contains("#3491c2") && Model.Color != "#3491c2") {%>display:none<% }%>" id="color-3491c2">Color2</a>
     <a class="profile-color" href="#" style="background: #ca5c00; <% if (usedColors.Contains("#ca5c00") && Model.Color != "#ca5c00") {%>display:none<% }%>" id="color-ca5c00">Color3</a>
     <a class="profile-color" href="#" style="background: #6c0; <% if (usedColors.Contains("#6c0") && Model.Color != "#6c0") {%>display:none<% }%>" id="color-6c0">Color4</a>
     <a class="profile-color" href="#" style="background: #5a35a4; <% if (usedColors.Contains("#5a35a4") && Model.Color != "#5a35a4") {%>display:none<% }%>" id="color-5a35a4">Color5</a>
     <a class="profile-color" href="#" style="background: #e4bc00; <% if (usedColors.Contains("#e4bc00") && Model.Color != "#e4bc00") {%>display:none<% }%>" id="color-e4bc00">Color6</a>
     <a class="profile-color" href="#" style="background: #00b8a5; <% if (usedColors.Contains("#00b8a5") && Model.Color != "#00b8a5") {%>display:none<% }%>" id="color-00b8a5">Color7</a>
     <a class="profile-color" href="#" style="background: #9e9a89; <% if (usedColors.Contains("#9e9a89") && Model.Color != "#9e9a89") {%>display:none<% }%>" id="color-9e9a89">Color8</a>
     <a class="profile-color" href="#" style="background: #de4fec; <% if (usedColors.Contains("#de4fec") && Model.Color != "#de4fec") {%>display:none<% }%>" id="color-de4fec">Color9</a>
     <a class="profile-color" href="#" style="background: #6b502e; <% if (usedColors.Contains("#6b502e") && Model.Color != "#6b502e") {%>display:none<% }%>" id="color-6b502e">Color10</a>
     <a class="profile-color" href="#" style="background: #1e4aa6; <% if (usedColors.Contains("#1e4aa6") && Model.Color != "#1e4aa6") {%>display:none<% }%>" id="color-1e4aa6">Color11</a>
     <a class="profile-color" href="#" style="background: #000; <% if (usedColors.Contains("#000") && Model.Color != "#000") {%>display:none<% }%>" id="color-000">Color12</a>
  </td>

I need to select first <a/> that doesn't have style display:none. Is it possible with jQuery?

Thanks!

Answer 1

Just do

$('a:visible:first')

Answer 2

Using filter selectors you will get the first visible link element:

$('a:visible:first')

Answer 3

$('a').filter(':visible').filter(':first')