"唯一可见的孩子"元素？

Question

我有一个很大的外部div,有许多相同的圆圈(这是一个较小的div,边界半径为100%).

当用户点击它们时,我使用jquery淡出这些圆圈,但是当我点击剩下的唯一圆圈时,我想添加其他事件.

:last-child或:nth-​​child()不会提供帮助,因为我不介意点击哪个圈子,直到只剩下其中一个圈子.

---

同样,元素是FADED OUT,因此它们仍然是可见元素的兄弟.所以我需要选择"最后可见"元素.

<div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

<div class="circle"></div>

</div>

---

$(document).ready(function(){
    $(".circle").click(function(){
        $(this).fadeOut("slow");
    });
    $("XXX").click(function(){
        alert("I was the last of Mohicans");
    });
});

Answer 1

为什么不

.circle:first-child:last-child {

？

编辑已编辑的问题:

如果要在单击时进行测试,如果该元素是唯一可见的元素,则可以执行以下操作:

$(document).ready(function(){
    $(".circle").click(function(){
        $(this).fadeOut("slow");
        if ($('.circle:visible').length>1) return; // returns if not the last one
        alert("I was the last of Mohicans");
    });
});