如何使用jquery排除子选择器中的子项？

Posted 2021-04-13

我有一个父元素div #mmm-a设置为visibility，hidden由之前的on click函数和我使用以下代码使它重新出现在页面上（点击）：

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

这工作正常，但当我试图从其父div #mmm-b排除一个孩子#mmm-a它不起作用，我试过这个（和变化）：

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

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

答案

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来激活元素的不透明度，而不是它的可见性。不透明度始终会影响子元素：零不透明度元素的所有内容始终为零不透明度，因此无法从中排除子元素。

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

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

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

另一答案

jQuery("#mmm-a").not("#mmm-b")意思是选择#mmm-a而不是mmm-b，而你需要从孩子名单中排除特殊孩子。

请改用它

$("#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>

以上是关于如何使用jquery排除子选择器中的子项？的主要内容，如果未能解决你的问题，请参考以下文章

如何从 jQuery 选择器中排除 $(this)？

如何使用 jquery 检查变量选择器中的属性？

jquery中的$的特殊用法

从 .length() 中删除特定子项 [重复]

我如何在 jquery 日期选择器中制作一个清晰的按钮

如何在 CSS 选择器中排除特定的类名？