javascript - JQuery - Animate() 函数仍然在 .not(...)、.not ('...' )、:not(. ..) 和 :not ('...' ) 元素上执行动画

Question

我想说这应该是一件非常简单的事情，我真的认为论坛上有关于这个问题的东西，但是没有找到任何东西。

因此，从标题中，您已经可以说出问题所在。我的代码不应隐藏 #player-one-turn 元素。我知道，它在名为 #fourth-step 的父元素中(但每个元素都有它的父元素 body)，但是，我不想在这里更改 DOM。也许这是必要的，我不知道。

---

$("#fourth-step").not($('#player-one-turn')).animate({
  opacity: 0
});

// SAME AS ABOVE - DOESN'T WORK
//$("#fourth-step:not('#player-one-turn')").animate({ opacity: 0 });
//$("#fourth-step:not('#player-one-turn')").animate({ opacity: 0 });
//$("#fourth-step:not(#player-one-turn)").animate({ opacity: 0 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fourth-step">
  <div id="player-one-turn">
    DONT HIDE ME PLS
  </div>
  asd asd as das das das d asd as
</div>

JsFiddle 以防更好的编辑:https://jsfiddle.net/ax07dnrf/1/ .

---

这些案例不起作用:

$("#fourth-step").not($('#player-one-turn')).animate({ opacity: 0 });
$("#fourth-step:not('#player-one-turn')").animate({ opacity: 0 });
$("#fourth-step:not('#player-one-turn')").animate({ opacity: 0 });
$("#fourth-step:not(#player-one-turn)").animate({ opacity: 0 });

语法错误？我不这么认为:D

---

与我的问题类似的线程，但是，使用 :not() 或 .not() 在我的示例中都不起作用:

1. > Select all body except one element
2. > jquery - run function on each element except the one that was clicked

Answer 1

您的选择器说要找到一个具有 id 的元素的 fourth-step并从找到的元素中排除带有 id 的元素的 #player-one-turn .但是，#player-one-turn不会是第一个选择器找到的内容的一部分，因此不能排除。

您需要查看 fourth-step 中的所有子元素并排除 #player-one-turn从这些结果。

纯文本asd asd as das das das d asd as不被视为父元素中的子元素，因此被排除在外。但是，如果您将它包装在一个元素中(例如 span )，它将被包含在内。

// You don't have to pass a jQuery object to .not(), just a selector
$("#fourth-step").children().not('#player-one-turn').animate({
  opacity: 0
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fourth-step">
  <div id="player-one-turn">DONT HIDE ME PLS</div>
  <div>HIDE ME PLS</div>
  <div>HIDE ME PLS</div>  
  asd asd as das das das d asd as
</div>