Question

我有一个很大的外部 div ，其中包含许多相同的圆圈（这是一个较小的 div ，边界半径为100％）。

当用户点击这些圈子时，我正在使用jquery淡出这些圈子，但是我想在点击剩下的唯一圈子时添加其他活动。

：最后一个孩子或：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");
    });
});

Answer 2

jQuery实际上有一个only-child选择器，请参见此处：http://api.jquery.com/only-child-selector/

（希望我明白你的问题是正确的）

根据对问题的修改，请参阅以下内容：

也许你应该尝试这样的事情：

$(document).ready(function(){
    $(".circle").click(function(){
        var numCircles = $('.circle').length;
        var numFaded = $('.faded').length;
        if( (numCircles - numFaded) == 1 ) {
            alert("I was the last of Mohicans!");
        }
        $(this).fadeOut("slow");
        $(this).addClass("faded");
    });
});

我意识到上面的内容可能不是最优的（我不是JavaScript / jQuery主人），但它应该相当快（只要你不添加很多cirlces）它应该按你的需要运行。

请记住，我没有测试过上述情况，希望如果它不起作用，至少应该让你朝着正确的方向前进，但如果你需要更多帮助，请在下面评论。

Answer 3

解决方法是将额外的课程添加到这些div并且只有孩子。单击$（“。\ textraclass：only-child”）时，只需添加新事件。否则删除你的提取物并应用淡出效果。

Answer 4

$(document).ready(function () {
  $(".circle").click(function () {
   var $this = $(this);
   $this.fadeOut("slow");
   if ($this.siblings(':visible').length === 0) {
     alert("I was the last of Mohicans");
   }
 });
});

将可见的兄弟姐妹计算在内是最好的选择...... 如果需要，还可以添加类选择器..

“唯一可见的孩子”元素？

4 个答案: