javascript - 如何使用jquery排除子元素选择器中的子元素？

Question

我有一个父元素 div #mmm-a 设置为 可见性，通过之前的点击隐藏函数，我使用以下代码使其重新出现在页面上(单击时):

jQuery("#mmm-a").css("visibility", "visible").fadeTo(300, 1);

这工作正常，但是当我尝试从其父 div #mmm-a 中排除子 #mmm-b 时，它不起作用，我尝试过这个(和变体):

jQuery("#mmm-a").not("#mmm-b").css("visibility", "visible").fadeTo(300, 1);

我的代码有什么问题吗？如何使整个 div 再次可见，但保持其中的一个元素隐藏？

Answer 1

jQuery("#mmm-a") 仅选择 ID 为“mmm-a”的单个元素。 .not("#mmm-b") 不会从该选择中排除任何内容——它仍然是一个单元素列表。 (唯一可行的方法是，如果同一个元素具有两个 ID:那么 .not() 将排除它，最终选择零元素 - 但这是不可能的，因为有一个元素不能有两个 ID。)

排除单个子元素的多元素选择看起来更像 $('#mmm-a').find(':not(#mmm-b)') 或 $('#mmm-a :not(#mmm-b)') -- 这些将返回 mmm-a 的所有非 mmm-b 子元素的列表。

但这对您也没有帮助，因为您使用的是 fadeTo 来动画元素的不透明度，而不是其可见性。不透明度始终影响子元素:零不透明度元素的所有内容始终为零不透明度，不可能从中排除子元素。

与不透明度不同，子元素可以从可见性规则中排除:

#a {visibility:hidden}
#b {visibility:visible}

<div id="a"> hidden parent
  <div id="b">visible child</div>
</div>

...但是可见性无法进行动画处理(“可见”和“隐藏”之间没有部分状态。)

如果您需要父级的不透明度进行动画处理，但子级保持可见，则唯一的方法是重构 HTML，使要保持可见的元素不是要隐藏的元素的子元素。

编辑:不过，根据下面的评论，您想以相反的方式执行此操作:

I want to child element to stay hidden while rest of a div fade to visible again, to manipulate child visibility later

...这更容易!

$('#go').on("click", function() {
  $('#b').css("visibility","hidden"); // hide child element
  $('#a')
    .css("opacity","0") // set opacity to 0 first, so the animation will work later
    .css("visibility","visible") // set visiblity to visible
    .fadeTo(300, 1) // animate opacity from 0 to 1
});

#a, #v {visibility: hidden}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="a"> parent made visible
  <div id="b">child stays hidden</div>
</div>
<button id="go">Click me</button>