如何使用 jquery 在 children 选择器中排除 child？

Question

我有一个 parent 元素 div #mmm-a 通过之前的 on click 函数设置为 visibility, hidden 我正在使用以下代码使其重新出现在页面上（单击时）：

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

这很好用，但是当我试图从它的 parent div #mmm-a 中排除 child #mmm-b 它没有用，我'试过这个（和变化）：

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

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

Answer 1

jQuery("#mmm-a").not("#mmm-b") 意思是 select #mmm-a 不是 id mmm-b 而你需要从 childrens 的列表中排除特殊的 child。

改用这个

$("#mmm-a :not(#mmm-b)").css("visibility", "visible");

#mmm-a {visibility: hidden}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mmm-a">
  <div>1</div>
  <div id="mmm-b">#mmm-b</div>
  <div>3</div>
</div>

Answer 2

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

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

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

与不透明度不同，子元素可以从 visibility 规则中排除：

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

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

...但是 visibility 无法设置动画（"visible" 和 "hidden" 之间没有部分状态。）

如果您需要父项的不透明度来设置动画但子项的不透明度保持可见，唯一的方法是重组您的 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>

如何使用 jquery 在 children 选择器中排除 child？

How to exclude a child in children selector using jquery?

html

javascript

jquery

jquery-selectors