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

Posted 2023-03-06

【中文标题】“唯一可见的孩子”元素？

【英文标题】：The "only-visible-child" element?

【发布时间】：2012-12-21 03:57:54

【问题描述】：

我有一个很大的外部 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");
    );
);

【问题讨论】：

向我们展示您的代码...或者 jsfiddle 可能是

为什么不向我们展示一些示例源代码？帮助你会更容易。

【参考方案1】：

$(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");
   
 );
);

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

【参考方案2】：

为什么不

.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");
    );
);

【讨论】：

当然这对于选择唯一的孩子来说很好，但我的问题不正确，所以我编辑了它。

为什么你有两次$(".circle").click(function()？我不知道 jQuery 可以做到这一点？

我有它，因为它是 OP 的问题。但是是的，这是可能的，并且 jQuery 保证执行顺序是插入顺序。

工作得很好！谢谢

【参考方案3】：

解决方法是为这些 div 增加一个额外的类，并且只有一个孩子。当 $(".extraclass :only-child") 被点击而不是添加你的新事件。否则删除你的额外类并应用淡出效果。

【参考方案4】：

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 大师），但它应该相当快（只要您不添加很多圈子）并且它应该可以根据您的需要运行。

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

【讨论】：

@dystroy 好吧，也许我的问题不正确。这两个答案都提供了一种选择唯一子元素的有效方法，但是当我使用 fadeOut 时，元素仍保留在 html 文件中，因此它们都不会成为唯一的子元素。对不起，我以前不知道这一点。我将编辑问题以避免进一步混淆。

好的，我明白了，我会修改答案

修改了我的答案，希望这就是你想要的！