1

I'm trying to use jquery to set the class of all visible elements of pattern (3n+1), but it doesn't seem to be selecting the way that I anticipated. I'm wondering if my syntax is wrong. Here's my code:

$('.filterElement:visible:nth-child(3n+1)').addClass('firstInRow');

I was following the method suggested here:

Make css nth-child() only affect visible

Is there a way to do this with pure css?

Community
  • 1
  • 1
mheavers
  • 29,530
  • 58
  • 194
  • 315

3 Answers3

2

Is there a way to do this with pure css?

I don't think there is. CSS has selectors for element attributes, but not for CSS properties (which are applied after the selector selects the elements).

dsh
  • 12,037
  • 3
  • 33
  • 51
1

I found a way to do this - though it seems like it could be streamlined.

CSS:

.element { margin-left: 10px; }
.element:nth-child(3n+1){ margin-left: 0; }
.element.firstInRow { margin-left:0 !important; }
.element.std { margin-left:15px !important; }

JAVASCRIPT

.filterButton.click(function(){
  $('.element').removeClass('firstInRow, std');
  if ($('.element').hasClass('.hideMe')){
    $(this).hide();
  }
  setMargins();
});

function setMargins(){
  $('.element:visible').each(function(i){
    if (i%3 == 0){
    $(this).addClass('firstInRow');
    } else {
    $(this).addClass('std');
    }
  });
}
mheavers
  • 29,530
  • 58
  • 194
  • 315
1

nth-child doesn't seem to play well when there is hidden items...period. You can see an example here: http://jsfiddle.net/anAgent/FzBWn/. Click on the "Test 2" button to run the selector against the collection of rows that contain hidden values. The jQuery code below is how you can select what you need.

CSS

.container {float:left;}
.row { display:block; border: 1px solid black; padding:10px; width:100px;}
.row.odd {border: 2px dotted red;background-color:yellow;}
.hidden {visibility:hidden;display:none;}

HTML

<div class="container"> 
    <div id="1" class="row">Highlighted</div>
    <div id="2" class="row"></div>
    <div id="3" class="row hidden">I shouldn't be highlighted</div>
    <div id="4" class="row"></div>
    <div id="5" class="row">Highlighted</div>
    <div id="6" class="row"></div>
    <div id="7" class="row hidden">I shouldn't be highlighted</div>
    <div id="8" class="row"></div>
    <div id="9" class="row">Highlighted</div>
    <div id="10" class="row"></div>
    <div id="11" class="row"></div>
</div>
<div class="container"> 
    <div id="1" class="row">Highlighted</div>
    <div id="2" class="row"></div>
    <div id="3" class="row "></div>
    <div id="4" class="row">Highlighted</div>
    <div id="5" class="row"></div>
    <div id="6" class="row"></div>
    <div id="7" class="row">Highlighted</div>
    <div id="8" class="row"></div>
    <div id="9" class="row"></div>
    <div id="10" class="row">Highlighted</div>
    <div id="11" class="row"></div>
</div>

jQuery Get all visible items and then find if it's the third one in the list.

$('.row:visible').each(function(idx) {
    $(this).toggleClass('odd',(idx%3 == 0));
});
anAgent
  • 2,550
  • 24
  • 34