用JQuery切换div后重新加载CSS

Question

I've found a really clean simple way of toggling the visibility of divs with filters by Tim Robert-Fitzgerald on Codepen and it works great on my site however I need to extend it slightly for my needs.

By default I have an nth-child setup that removes the border of the second div, however when the divs are toggled this isn't reapplied to the second div. In reality it is still applied but this is not visible because the divs are set to display:none;

How can I get the nth-child to re-calculate once the divs have been toggled please?

 var $btns = $('.btn').click(function() { if (this.id == 'all') { $('#parent > div').fadeIn(450); } else { var $el = $('.' + this.id).fadeIn(450); $('#parent > div').not($el).hide(); } $btns.removeClass('active'); $(this).addClass('active'); }) 

 * { box-sizing: border-box; } body { padding: 10px; background: #ecf0f1; font-family: helvetica, sans-serif; font-weight: 200; } .btn { border: none; background: linear-gradient(to bottom, #3498db, #2980b9); border-radius: 3px; font-family: Arial; color: #ffffff; padding: 5px 10px 5px 10px; text-decoration: none; margin: 5px; } .active { background: linear-gradient(to bottom, #3cb0fd, #3498db); text-decoration: none; } .box { background:#2980b9; padding: 10px; height: 100px; width: calc(33% - 10px); float: left; margin: 5px; text-align: center; border-radius: 3px; color: #fff; border:4px solid #000; } .box:nth-child(2) { border:none; } .spacer { clear: both; height: 20px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button class="active btn" id="all">Show All</button> <button class="btn" id="a">Show A</button> <button class="btn" id="b">Show B</button> <button class="btn" id="c">Show C</button> <button class="btn" id="d">Show D</button> <div class="spacer"></div> <div id="parent"> <div class="box ab">A &amp; B</div> <div class="box a">A</div> <div class="box b">B</div> <div class="box c">C</div> <div class="box d">D</div> </div> 

Answer 1

This isn't working because the elements are still there, just hidden. You may want to consider using an additional class to control borders (or whatever other styles it is you are wanting) and swapping those with your jQuery the same way you are adding and removing the active class.

Answer 2

The CSS selector you used ( :nth-child(2) ) is not what you need because it's based on HTML DOM elements. The 2nd element never changes place in the DOM, it just gets hidden.

I don't believe there's a CSS solution to this but there is a jQuery solution.

I took your Codepen and modified very little things

CSS (instead of .box:nth-child(2) )

.box.no-border {
    border:none;
}

JS

var $btns = $('.btn').click(function() {
  if (this.id == 'all') {
    $('#parent > div').fadeIn(450);
  } else {
    var $el = $('.' + this.id).fadeIn(450);
    $('#parent > div').not($el).hide();
  }
  $btns.removeClass('active');
  $(this).addClass('active');

  $('.box').removeClass('no-border'); // reinitialize
  $('.box:visible').eq(1).addClass('no-border'); // apply the class
})

Please note that the eq() method is 0 based index, so .eq(1) will get you the second element. Adding :visible will only get you those that are visible on screen.