Add class to all elements with a certain class [closed]

Question

I'm a bit new to javascript and jquery, and I have some troubles doing what I want in a "nice" way.

I have a HTML web page like this:

<div class="list-group">
   <a href="#all" id="category-all" class="list-group-item active">All</a>
   <a href="#" id="category-0" class="list-group-item">Foo</a>
   <a href="#" id="category-1" class="list-group-item">Bar</a>
   <a href="#" id="category-2" class="list-group-item">FooBar</a>
</div>
<div class="row">
   <div class="category-0">element 1</div>
   <div class="category-1">element 1</div>
   <div class="category-1">element 1</div>
   <div class="category-0">element 1</div>
   <div class="category-2">element 1</div>
   <div class="category-0">element 1</div>
   <div class="category-2">element 1</div>
</div>

I would like to add some kind of "filter", where if you click on a certain category link, all elements from other categories will disappear. I managed to do it by adding a class to my css called invis with "display:none", and then wrote this:

$( ".list-group-item" ).click(function() {
  $(".list-group-item").removeClass('active');
  $( this ).toggleClass("active");
  var test = "." + event.target.id;
  $(".category-0").addClass('invis');
  $(".category-1").addClass('invis');
  $(".category-2").addClass('invis');
  if (test == ".category-0")
    $(".category-0").removeClass('invis');
  if (test == ".category-1")
    $(".category-1").removeClass('invis');
  if (test == ".category-2")
    $(".category-2").removeClass('invis');
  if (test == ".category-all") {
    $(".category-0").removeClass('invis');
    $(".category-1").removeClass('invis');
    $(".category-2").removeClass('invis');
  }
});

This does the job, but I'd like to find a "cleaner" way of doing it. How can I improve it?

Thanks !

Answer 1

One way to do it using jQuery would be to hide all of the <div>s when a filter control is clicked, then unhide the specific ones that you want to show.

This way you won't need your extra invis class.

you will notice the "^=" symbol in the below code it simply is a selector that literally means "starts with".

$('a[id^="category"]').click(function() {
// when an <a> element is click THAT has an ID that starts with "category" ...

  $('div[class^="category"]').hide();
  // hide every <div> that's ID starts with "category" ...
  $('div.' + this.id).show();
  // re-show every <div> that's CLASS matches the original <a>'s ID ...
});
$('a[id="show-all"]').click(function() {
  // if the "all" is clicked, show them ALL again.
  
  $('div[class^="category"]').show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
  <a href="#all" id="show-all" class="list-group-item active">All</a>
  <a href="#" id="category-0" class="list-group-item">Foo</a>
  <a href="#" id="category-1" class="list-group-item">Bar</a>
  <a href="#" id="category-2" class="list-group-item">FooBar</a>
</div>
<div class="row">
  <div class="category-0">Foo</div>
  <div class="category-1">Bar</div>
  <div class="category-1">Bar</div>
  <div class="category-0">Foo</div>
  <div class="category-2">FooBar</div>
  <div class="category-0">Foo</div>
  <div class="category-2">FooBar</div>
</div>