$(document).ready(function() { var counts = $('#grid li a').size(); $('.col-lg-9 p').text('at the moment their ' + counts); }); $('.col-lg-3 p').click(function(e) { e.preventDefault(); var a = $(this).attr('data-id'); a = a.substr(1); $('#grid li a').each(function() { if (!$(this).hasClass(a) && a != 'all') $(this).addClass('hide'); else $(this).removeClass('hide'); }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="row mt"> <div class="col-lg-9"> <h1>Hello, my works below</h1> <p></p> </div> <div class="col-lg-3"> <p data-id="#optam" class="pull-right"><br><button type="button" class="btn btn-blue">optam</button></p> <p data-id="#math" class="pull-right"><br><button type="button" class="btn btn-blue">math</button></p> <p data-id="#all" class="pull-right"><br><button type="button" class="btn btn-blue">all</button></p> </div> </div> </div> <div id="portfolio"> <div class="container"> <div class="row mt"> <ul class="grid effect-2" id="grid"> <li> <a class="optam" href="proj/p5.html"><img src="assets/img/portfolio/cpp5.jpg"></a> <h2>Practical 5</h2> </li> <li> <a class="math" href="proj/p5.html"><img src="assets/img/portfolio/cpp5.jpg"></a> <h2>Practical 5</h2> </li> </ul> </div> </div> </div>

When I click the math or optam button in the col-lg-3 class , the piccha that does not fit the filter disappears, but <h2>Practical 5</h2> remains. Tell me what's the problem?

    2 answers 2

    The code, of course, has a lot of questions - starting from using the outdated jQuery API (size () method, for example) to not quite correct code (for example, in e.preventDefault () it is not necessary when in this case you handle the click event on the element p: what is the default behavior of a paragraph in order to prevent it?)
    But, if you answer the question, the element

     <h2>Practical 5</h2>

    does not disappear, because it is not in the <a> element, and here you assign a class to an element (link)

     $('#grid li a').each(function() { if (!$(this).hasClass(a) && a != 'all') $(this).addClass('hide'); else $(this).removeClass('hide'); });

    Here the image disappears because it is in the <a> element

     <li><a class="optam" href="proj/p5.html"><img src="assets/img/portfolio/cpp5.jpg"></a><h2>Practical 5</h2></li>

      Option 1 :

       $('#grid li a').each(function() { if (!$(this).hasClass(a) && a != 'all') { $(this).addClass('hide').closest("li").find("h2").addClass('hide'); } else { $(this).removeClass('hide').closest("li").find("h2").removeClass('hide'); } });

      Option 2 : use element + next

      with element + next we get the next element

       if(a != 'all') { $('#grid li a, #grid li a + h2').addClass("hide"); $('#grid li a[class*="'+a+'"], #grid li a[class*="'+a+'"] + h2').removeClass("hide"); } else{ $('#grid li a, #grid li a + h2').removeClass("hide"); }

      Option 3 : use siblings ()

      using siblings (), we get all the brothers and sisters in the DOM set (in the parent).

      ! If you have third-party lines in <li> to which the .hide class should not be applied, this solution will not work

       if(a != 'all') { $('#grid li a').addClass("hide").siblings().addClass("hide"); $('#grid li a[class*="'+a+'"').removeClass("hide").siblings().removeClass("hide"); } else{ $('#grid li a').removeClass("hide").siblings().removeClass("hide"); }