Sử dụng: hiển thị và: con đầu tiên cùng nhau trong jQuery

Question

Tôi đang cố gắng sử dụng bộ chọn giả ": hiển thị" và ": con đầu tiên" cùng nhau trong jQuery và dường như không hoạt động. Tôi có HTML sau:

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

Và cuộc gọi jQuery sau:

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

Nhưng nó không bao giờ dường như tìm thấy những yếu tố đúng ... nó tìm thấy phần tử đầu tiên nhưng không phải là người đầu tiên nhìn thấy thành phần. Tôi thậm chí đã thử đổi thứ tự chọn ": con đầu tiên: hiển thị" thay vì ": hiển thị: con đầu tiên" và điều đó cũng không hoạt động. Bất kỳ ý tưởng?

Answer 1

chọn của bạn

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

trận đấu chỉ Một yếu tố chỉ khi đó là first-child của DIV phụ huynh và khi nó nhìn thấy được.

Nếu bạn muốn để có được nhìn thấy Một yếu tố đầu tiên, bạn nên sử dụng .eq function

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

hoặc :first pseudo-class

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

Answer 2

Tôi không chắc chắn lý do tại sao :visible:first-child không hoạt động, nhưng bạn có thể thử

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

Answer 3

Theo như tôi biết chọn pseudo-class: first-child sẽ chỉ phù hợp với đứa con đầu lòng bao giờ hết. Nó không thể được chỉ định thêm bằng cách thêm một lớp giả mà nó cũng phải được hiển thị. Bạn có thể muốn thử viết

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

thay vì sử dụng đúng lớp giả css. JQuery documentation for :first

Answer 4

Bạn có thể muốn thử $("div a.action:visible(:first-child)) như chọn của bạn, mà là cách jQuery xác định sử dụng nhiều bộ chọn psuedo trong tài liệu API của nó.