Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Aug 6th, 2012  |  syntax: None  |  size: 1.91 KB  |  hits: 10  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. jquery/javascript or css - css for nth child only when display is visible
  2. $('.filterElement:visible:nth-child(3n+1)').addClass('firstInRow');
  3.        
  4. .container {float:left;}
  5. .row { display:block; border: 1px solid black; padding:10px; width:100px;}
  6. .row.odd {border: 2px dotted red;background-color:yellow;}
  7. .hidden {visibility:hidden;display:none;}
  8.        
  9. <div class="container">
  10.     <div id="1" class="row">Highlighted</div>
  11.     <div id="2" class="row"></div>
  12.     <div id="3" class="row hidden">I shouldn't be highlighted</div>
  13.     <div id="4" class="row"></div>
  14.     <div id="5" class="row">Highlighted</div>
  15.     <div id="6" class="row"></div>
  16.     <div id="7" class="row hidden">I shouldn't be highlighted</div>
  17.     <div id="8" class="row"></div>
  18.     <div id="9" class="row">Highlighted</div>
  19.     <div id="10" class="row"></div>
  20.     <div id="11" class="row"></div>
  21. </div>
  22. <div class="container">
  23.     <div id="1" class="row">Highlighted</div>
  24.     <div id="2" class="row"></div>
  25.     <div id="3" class="row "></div>
  26.     <div id="4" class="row">Highlighted</div>
  27.     <div id="5" class="row"></div>
  28.     <div id="6" class="row"></div>
  29.     <div id="7" class="row">Highlighted</div>
  30.     <div id="8" class="row"></div>
  31.     <div id="9" class="row"></div>
  32.     <div id="10" class="row">Highlighted</div>
  33.     <div id="11" class="row"></div>
  34. </div>
  35.        
  36. $('.row:visible').each(function(idx) {
  37.     $(this).toggleClass('odd',(idx%3 == 0));
  38. });
  39.        
  40. .element { margin-left: 10px; }
  41. .element:nth-child(3n+1){ margin-left: 0; }
  42. .element.firstInRow { margin-left:0 !important; }
  43. .element.std { margin-left:15px !important; }
  44.        
  45. .filterButton.click(function(){
  46.   $('.element').removeClass('firstInRow, std');
  47.   if ($('.element').hasClass('.hideMe')){
  48.     $(this).hide();
  49.   }
  50.   setMargins();
  51. });
  52.  
  53. function setMargins(){
  54.   $('.element:visible').each(function(i){
  55.     if (i%3 == 0){
  56.     $(this).addClass('firstInRow');
  57.     } else {
  58.     $(this).addClass('std');
  59.     }
  60.   });
  61. }
create a new version of this paste RAW Paste Data