javascript - 淡出所有嵌套的 div

Question

在我的页面上，我正在尝试这样做:比方说，当我们单击带有 id min_reg 的某个链接时，它会为带有 idftr_form_cntr 的 div 设置动画，并且显示另一个 div tcr_form_cntr。

有 3-4 个链接具有相同的功能，但在 ftr_form_cntr 中显示另一个 div。好吧，如果用户第一次单击其中一个链接，则没有问题。但是如果用户已经点击了(我的意思是如果 ftr_form_cntr 已经打开)我只想淡出嵌套到 ftr_form_cntr 的所有现有 div 并淡入另一个 div(或者交换现有的 div另一个)。

看看这一行 tcr_form_cntr.fadeIn(1000)。在此行之前我需要做什么来淡出所有嵌套的 div？

我的函数是这样的:

$(min_reg).click(function () {
    if($(ftr_form_cntr).hasClass('opened')){  
        $(ftr_form_cntr)...<fadeOut all nested divs>
        tcr_form_cntr.fadeIn(1000);
        return;
    }
    ftr_form_cntr.show().stop(true, true).animate({
        height:"170"
    },1000).addClass('opened');
    tcr_form_cntr.fadeIn(1000);
});

Answer 1

假设 ftr_form_cntr 是一个字符串变量，其中包含容器元素的 jQuery 选择器，您可以选择其中的所有 div 元素并像这样淡化它们:

$(ftr_form_cntr + " div").fadeOut();

看看the jQuery doco on selectors ，特别是 "descendant selector" .

如果 ftr_form_cntr 不是字符串变量，而是实际上是对 DOM 元素或其他内容的引用，那么另一种选择某些嵌套元素的方法是使用 .find()方法，它根据您提供的另一个选择器获取现有 jQuery 对象中元素的后代:

$(ftr_form_cntr).find("div").fadeOut();