Question

我需要选择容器中除特定子元素及其后代之外的所有元素。

在下面的示例中，我希望My name is Donald和I am a duck被突出显示container div中其他所有内容的jQuery排除。

问题在于选择器.container :not(.intro)似乎仅排除了My name is Donald。有没有办法做到这一点？

$(document).ready(function() {
  $(".container :not(.intro)").css("background-color", "yellow");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<h1>Welcome to My Homepage</h1>
<div class="container">
  <div class="intro">My name is Donald
    <div>I am a duck</div>
  </div>
  <div>I live in Duckburg.</div>
  <div>My best friend is Mickey.</div>

</div>

jsfiddle

Answer 1

您可以在>和.container之间添加:not(.intro)，这将导致它只会选择.container的直接子级，而这些子级没有{{1 }}

.intro

演示

$(document).ready(function() {
  $(".container > :not(.intro)").css("background-color", "yellow");
});

$(document).ready(function() {
  $(".container > :not(.intro)").css("background-color", "yellow");
});

如何选择一个子元素及其后代以外的所有子元素？

1 个答案: