Использование: visible и: first-child вместе в jQuery

Question

Я пытаюсь использовать псевдоселекторы ": visible" и ": first-child" в jQuery, и это, похоже, не работает. У меня есть следующий HTML:

<div>
    <a class="action" style="display:none;">Item One</a>
    <a class="action">Item One</a>
    <a class="action">Item One</a>
</div>

И следующий вызов jQuery:

$("div a.action:visible:first-child").addClass("first");

Но кажется, что он никогда не находит нужный элемент ... он находит первый элемент, но не первый видимый элемент. Я даже пытался поменять местами порядок выбора ": first-child: visible" вместо ": visible: first-child", и это тоже не работает. Есть идеи?

Answer 1

Ваш селектор

$("div a.action:visible:first-child").addClass("first");

соответствует только элементу A , только когда это первый дочерний элемент родительского DIV и когда он видим.

Если вы хотите получить первый видимый элемент A , вам следует использовать функцию .eq

$("div a.action:visible").eq(0).addClass("first");

или : первый псевдокласс

$("div a.action:visible:first").addClass("first");

Answer 2

Я не уверен, почему :visible:first-child не работает, но вы можете попробовать

$("div a.action:visible").eq(0).addClass("first");

Answer 3

Насколько я знаю, селектор псевдокласса: первый ребенок будет соответствовать только первому дочернему элементу. Он не может быть дополнительно указан путем добавления псевдокласса, который также должен быть видимым. Вы можете попробовать написать

$("div a.action:visible:first").addClass("first");

вместо использования правильного псевдокласса CSS. Документация JQuery для: первая

Answer 4

Возможно, вы захотите попробовать $( "div a.action:visible(:first-child)) в качестве вашего селектора, именно так jQuery указывает использование нескольких псевдо-селекторов в своей документации API.