jquery - 使用 :visible and :first-child together in jQuery

Question

我尝试在 jQuery 中同时使用“:visible”和“:first-child”伪选择器，但似乎不起作用。我有以下 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 function

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

或:first pseudo-class

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