使用jQuery隐藏所有动态类的第一个实例

Question

我know如何在知道类名时隐藏除类的第一个实例以外的所有类，但是如何在类为动态时完成此类动作。 例如：

<div class="staticcontainername"> 
    <div class="variable"></div> <!-- This should show --> 
    <div class="variable"></div> 
    <div class="variable"></div> 
    <div class="variable2"></div> <!-- This should show --> 
    <div class="variable2"></div> 
    <div class="variable3"></div> <!-- This should show --> 
    <div class="variable3"></div> 
    <div class="variable3"></div> 
</div> 

只有每3周的div的第一次应该是可见的，不管是什么类成为或有多少项目的存在。

Answer 1

使用JavaScript

您可以在它们之间迭代，并与前一个比较级。 只有当类完全匹配时才会起作用，因此如果您有一个具有额外类的div，则会被视为“不同”。

$(function() { 
 
    var previousClass; 
 
    $('.staticcontainername div').each(function(index) { 
 
    // loop trough all elements in the container and get the class of the current element 
 
    var currentClass = $(this).attr('class'); 
 

 
    // compare the elements class with the previous one. 
 
    // if it matches, hide it 
 
    if (currentClass === previousClass) { 
 
     $(this).hide(); 
 
    } 
 

 
    // before we go to the next element, update the previousClass 
 
    // so we can compare it in the next iteration 
 
    previousClass = currentClass; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<div class="staticcontainername"> 
 
    <div class="variable">1</div> 
 
    <!-- This should show --> 
 
    <div class="variable">2</div> 
 
    <div class="variable">3</div> 
 
    <div class="variable2">1</div> 
 
    <!-- This should show --> 
 
    <div class="variable2">2</div> 
 
    <div class="variable3">1</div> 
 
    <!-- This should show --> 
 
    <div class="variable3">2</div> 
 
    <div class="variable3">3</div> 
 
</div>

纯CSS

如果你知道一个可能出现的可能的类，你可以使用CSS，只显示第一个。正如pointed out in this answer那样，没有像“第一堂课”那样的选择器。然而，提供了一个很好的解决方法，我们可以改变这种情况。

.staticcontainername>.variable~.variable, 
 
.staticcontainername>.variable2~.variable2, 
 
.staticcontainername>.variable3~.variable3 { 
 
    display: none; 
 
}

<div class="staticcontainername"> 
 
    <div class="variable">1</div> 
 
    <!-- This should show --> 
 
    <div class="variable">2</div> 
 
    <div class="variable">3</div> 
 
    <div class="variable2">1</div> 
 
    <!-- This should show --> 
 
    <div class="variable2">2</div> 
 
    <div class="variable3">1</div> 
 
    <!-- This should show --> 
 
    <div class="variable3">2</div> 
 
    <div class="variable3">3</div> 
 
</div>