How to Hide Loop Element in jQuery

Question

I have a dynamic list where class is generated by a PHP loop. I would like to know how to detect the added class as a future className might be added in the near future through CMS. Currently, I am doing it manually and want it to make it automated

for example

<ul id="Portfoliolist">
<li class="2020">Name</li>
<li class="2019">Name</li>
<li class="2018">Name</li>
<li class="2017">Name</li>
<li class="2016">Name</li>   
</ul>

jQuery Manual

$('.2020').click(function() {
$('.portfolio_image 2019').css('display','none');
});

$('.2019').click(function() {
    $('.portfolio_image 2020').css('display','none');
});

in the near future, a class name might be added like 2021 in the backend and will result to

<ul id="Portfoliolist">
<li class="2021">Name</li> <!-- added through loop -->
<li class="2020">Name</li>
<li class="2018">Name</li>
<li class="2017">Name</li>
<li class="2016">Name</li> 
</ul>

and the script will not work of the new class since 2021 doesn't exist in the jQuery code

$('.2019').click(function() {
$('.portfolio_image 2020').css('display','none');
$('.portfolio_image 2019').css('display','block');
});
 
$('.2020').click(function() {
$('.portfolio_image 2019').css('display','none');
$('.portfolio_image 2020').css('display','block');
});


<div class="portfolio_image 2019"> ...list of portfolio  </div>
<div class="portfolio_image 2018"> ...list of portfolio   </div>

Don't create unique classes for similar elements, use a common class and data attributes for the unique values. — charlietfl
– charlietfl, Commented Aug 10, 2020 at 0:16
What is portfolio_image? Is it the same element hidden by all li element clicks? Would relevant HTML help? — PeterKA
– PeterKA, Commented Aug 10, 2020 at 0:26
portfolio is the image that will be hidden if the list class is click — JeVic
– JeVic, Commented Aug 10, 2020 at 0:33

Lawrence Cherone · Accepted Answer · 2020-08-10 01:25:29Z

1

Rewrite like the following,

Initially hide all items except the first one with css.

Then instead of using a class for the li's use a data-* attribute because it's easy to pick up, separate from styling and jquerys .attr('class') would require a little parsing if you add a class for styling.

Then simply hide them all and only show the specific portfolio_image you want by using data-id matching a class name, (obviously if you have multiple of the same it will show them all)

$(function() {
  $('#Portfoliolist li').click(function() {
    $('.portfolio_image').hide()
    $('.portfolio_image.' + $(this).data('id')).show()
  })
})

.portfolio_image:not(:first-of-type) {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="Portfoliolist">
  <li data-id="2021">Name</li>
  <!-- ...added through loop -->
  <li data-id="2022">Name</li>
  <li data-id="2023">Name</li>
  <li data-id="2024">Name</li>
  <li data-id="2025">Name</li>
</ul>

<div class="portfolio_image 2021"> ...list of portfolio 2021</div>
<div class="portfolio_image 2022"> ...list of portfolio 2022</div>
<div class="portfolio_image 2023"> ...list of portfolio 2023</div>
<div class="portfolio_image 2024"> ...list of portfolio 2024</div>
<div class="portfolio_image 2025"> ...list of portfolio 2025</div>

Then your not breaking DRY and/or making js code for every item in db.

edited Aug 10, 2020 at 1:25

answered Aug 9, 2020 at 23:50

Lawrence Cherone

46.7k7 gold badges66 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JeVic Over a year ago

I have updated the code. The unique class is the trigger to hide and show a portfolio image with a number class as well so if they click #Portfoliolist 2019, all portfolio images with 2019 will be displayed

Collectives™ on Stack Overflow

How to Hide Loop Element in jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related