Hide all but first instance of a dynamic class using jQuery

Question

I know how to hide all but the first instance of a class when I know the class name but how can this done be done when the class is dynamic. For example:

<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>

Only the 1st of each 3 divs should be visible, regardless of what that class becomes or how many of item exist.

So now after your edit, you only want the first instance of each new class within the container to be shown - is that correct? — Rory McCrossan, Jun 14 '17 at 08:37
Yes, show only the first instance of each class regardless of class name or quantity — Sam, Jun 14 '17 at 08:39

JasperZelf · Accepted Answer · 2017-06-14T09:05:36.783

Using Javascript

You can iterate over them and compare the class with the previous one. Will only work if the classes matc exactly, so if you have one div with an extra class, that will be seen as "different".

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

Pure CSS

If you know the possible classes that might come up, you can use CSS to only show the first one. As is pointed out in this answer there is no such selector as "first of class". However a nice workaround is provided that we can alter for this case.

.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>

The class names are just stand-ins for what would be a dynamic class following any structure, so I don't believe the pure CSS solution would work. — Sam, Jun 14 '17 at 09:25
@Sam that's why iI started wit "If you know the possible classes", which might well be a defined set. We don't know that at this point ;) — JasperZelf, Jun 14 '17 at 11:27

Hide all but first instance of a dynamic class using jQuery

1 Answers1