jquery - 使用 jQuery 和 CSS 隐藏基于重复动态类子项的容器

Question

如果一个元素包含一个已经发生的类的子元素，我该如何隐藏它？

因此所有具有已经出现的“child*”类的子容器的容器都将被隐藏

所以在这个例子中，第二个和第五个容器将被隐藏。 我知道他们的课将从 child 开始”，但我不知道剩下的课会是什么。

<div class="container">
  <div class="child.65">
  </div>
</div>

 <div class="container">
  <div class="child.65">
  </div>
</div>

 <div class="container">
  <div class="child.11">
  </div>
</div>

<div class="container">
  <div class="child.47">
  </div>
</div>

<div class="container">
  <div class="child.11">
  </div>
</div>

总而言之，我如何隐藏一个我只知道第一个字符串的重复类的容器？

Answer 1

要完成这项工作，您可以遍历每个 .container > div 元素，然后选择共享同一类的所有其他元素，并删除除第一个元素以外的所有元素。像这样:

$('.container > div').each(function() {
  $('.' + this.className.replace('.', '\\.')).not(':first').parent().hide();
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="child.65">first 65</div>
</div>
<div class="container">
  <div class="child.65">second 65</div>
</div>
<div class="container">
  <div class="child.11">first 11</div>
</div>
<div class="container">
  <div class="child.47">first 47</div>
</div>
<div class="container">
  <div class="child.11">second 11</div>
</div>

请注意，通过在 .container 元素本身上使用 data 属性来定义组，可以使逻辑变得更加清晰和快速 - 假设您能够修改现有的 HTML 结构。