How to hide all the divs of each class except first class in jquery

Question

I have some divs of same class,I need to hide all the div of each class except first one,but here class like critical or major can be change based on condition.it wont be always same.Here is the html and script below.

HTML

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<div id="critical">
<h4 id="test" class="critical">critical</h4>
</div>
<div id="critical">
<h4 id="test" class="critical">critical</h4>
</div>
<div id="critical">
<h4 id="test" class="critical">critical</h4>
</div>
<div id="major">
<h4 id="test" class="major">major</h4>
</div>
<div id="major">
<h4 id="test" class="major">major</h4>
</div>
</div>   

SCRIPT

<script>
    $(document).ready(function(){

    });
  </script>

Answer 1

您可以使用：not和：first选择器

$('.critical:not(:first)').hide();

Answer 2

A small, reusable, easy-to-understand function.

 $(function() { function hideExceptFirst(selector) { var i = 0; $(selector).each(function() { if (i > 0) { $(this).hide(); } i++; }); } hideExceptFirst('.critical'); hideExceptFirst('.major'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <div id="critical"> <h4 id="test" class="critical">critical 1</h4> </div> <div id="critical"> <h4 id="test" class="critical">critical 2</h4> </div> <div id="critical"> <h4 id="test" class="critical">critical 3</h4> </div> <div id="major"> <h4 id="test" class="major">major 1</h4> </div> <div id="major"> <h4 id="test" class="major">major 2</h4> </div> </div> 

Answer 3

With the example you have the only items with classes are the H4 elements. Using your example if the names will change dynamically you could do it this way:

Keeping an array of which classes that have already been filtered. You could go through each DIV and treat IDs like classes but that doesn't conform with HTML standards.

 $(document).ready(function(){ var groups = []; $("h4").each(function(){ var thisGroup = $(this).attr("class"); if(groups.indexOf(thisGroup) > -1){ $(this).parent().hide(); } else{ groups.push(thisGroup); } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <div id="critical"> <h4 id="test" class="critical">critical</h4> </div> <div id="critical"> <h4 id="test" class="critical">critical</h4> </div> <div id="critical"> <h4 id="test" class="critical">critical</h4> </div> <div id="major"> <h4 id="test" class="major">major</h4> </div> <div id="major"> <h4 id="test" class="major">major</h4> </div> </div> 

Answer 4

Here's one attempt that uses destructuring to easily get everything but the first element for a class name.

For the sample HTML this will work when the input is "critical" or "major" (without quotes).

 function hideAllButOneClass() { const classInput = document.getElementById('classInput').value; const queryClass = '.' + classInput; const instancesOfClassName = $(queryClass); // destructuring here const [first, ...rest] = instancesOfClassName; rest.forEach(entry => { const entryParent = $(entry).parent()[0]; $(entryParent).hide(); }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <label for="classInput">Class to hide<input ref="classInput" id="classInput" type="text"/> <button onclick="hideAllButOneClass()">Hide class (except first)</button> <div class="main"> <div id="critical"> <h4 id="test" class="critical">critical</h4> </div> <div id="critical"> <h4 id="test" class="critical">critical</h4> </div> <div id="critical"> <h4 id="test" class="critical">critical</h4> </div> <div id="major"> <h4 id="test" class="major">major</h4> </div> <div id="major"> <h4 id="test" class="major">major</h4> </div> </div> 

Answer 5

If you at least know they are wrapped by the .main element, you can try traversing elements one by one, and then hide an element if it have an already visited class. Check next example.

 $(document).ready(function() { let targets = $(".main > div"); let visitedClasses = []; targets.each(function() { let innerH4 = $(this).find("h4"); if (visitedClasses.includes(innerH4.attr("class"))) $(this).hide(); else visitedClasses.push(innerH4.attr("class")); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="main"> <div id="critical"> <h4 id="test" class="critical">critical 1</h4> </div> <div id="critical"> <h4 id="test" class="critical">critical 2</h4> </div> <div id="critical"> <h4 id="test" class="critical">critical 3</h4> </div> <div id="major"> <h4 id="test" class="major">major 1</h4> </div> <div id="major"> <h4 id="test" class="major">major 2</h4> </div> </div> 

As a side note, you should really skip the duplication of id attributes for multiple elements.