Clear and Add new class?

Question

I have list like:

<ul id="portfolio-filter">
  <li><a class=".tab1" data-filter=".Design" dir="ltr" href="#">Design</a></li>
  <li><a class=".tab2" data-filter=".Tech" dir="ltr" href="#">Technology</a></li>
</ul>
<ul id="portfolio-list">
   <li style='opacity:1'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:0'>Content</li>
   <li style='opacity:0'>Content</li>
   <li style='opacity:0'>Content</li>
</ul>

I use Jquery to add class (MYCLASS) where li has opacity = 1 like (run on page load):

 //Add class if opacity
    $('#portfolio-list li').map(function() {
        if($(this).css('opacity') != '0')
          $(this).addClass("MYCLASS");
      });

But when I use click function (It will change opacity of each in another order) like:

<ul id="portfolio-list">
   <li style='opacity:0'>Content</li>
   <li style='opacity:0'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:1'>Content</li>
   <li style='opacity:3'>Content</li>
   <li style='opacity:1'>Content</li>
</ul>

And I want i re-add class onclick, I used :

$filter.find('a').click(function (e) {
    //Run filter
    $container.isotope({
            filter: selector,
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
    //Add class
    $('#portfolio-list li').map(function() {
       if($(this).css('opacity') != '0') {
         $(this).addClass("MYCLASS");
       } else {
         $(this).removeClass("MYCLASS");
       }
    ); 
}

But It doesn't run correctly.

Everyone can help me? Thank you.

Does the `click` binding run? Might there be any errors in the console when it does? — sabof, Mar 23 '14 at 05:09

score 2 · Answer 1 · edited May 23 '17 at 11:44

i tried my hand on your code and it appears it is working for me. i used each() to loop through all li tags within #portfolio-list li and apply some css class as i understood the question.

$(function(){
  $('#portfolio-list li').each(function(){
    if($(this).css('opacity') == 1){
      $(this).addClass("MYCLASS");
    }      
  });  
});

here is working Demo.

you were using map() which seems identical in working but there is difference, See Here.

score 1 · Answer 2 · answered Mar 23 '14 at 05:22

1

Try to change that "map" fucntion to an each function

$('#portfolio-list li').each(function() {

answered Mar 23 '14 at 05:22

Entropyk

117
4

Clear and Add new class?

2 Answers2