如何淡化容器中的所有div，除了一个带有jQuery的div？答案

【问题标题】：How to fade all divs in a container except one with jQuery?如何淡化容器中的所有div，除了一个带有jQuery的div？
【发布时间】：2011-09-09 13:22:18
【问题描述】：

我有这个：

$("#id").click(function() {
    $('.swoosh div').fadeOut('fast', function(){
        $('.template').fadeIn('fast');
    });
});

.swoosh 是容器 div，并且 .template 是我点击#id 时想要保留的div，而.swoosh 中的所有其他div 都消失了。

我觉得有点傻，但我玩了好久都没有用。请帮助兄弟。

【问题讨论】：

【解决方案1】：

您或许可以使用not^[doc] 选择器

$("#id").click(function() {
    $('.swoosh div:not(.template)').fadeOut('fast');
});

【讨论】：

【解决方案2】：

    $('.swoosh div[class!="template"]').fadeOut('fast');

【讨论】：

【解决方案3】：

$("#id").click(function() {
    $('.swoosh div').fadeOut('fast');
    $('.template').fadeIn('fast');
});

【讨论】：

【解决方案4】：

由于您正在淡出容器 DIV，因此该 DIV 中的所有元素也正在淡出似乎是合乎逻辑的。因此，您可以做的是从容器 div 中提取元素并将其放置在 DOM 中的其他位置，然后再将容器 DIV 淡出。这样，它应该保持可见。

【讨论】：

【解决方案5】：

老问题，但这也可以

$("#id").click(function() {
    $('.swoosh div').not($('.template')).fadeOut('fast');
});

【讨论】：