The problem is the following, there is HTML, for example:

<div class="wrap"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

It is necessary to add the class "large" to all elements corresponding to the selector :nth(2n+3) :

 $('.wrap .item:nth-child(2n+3)').addClass('large');

When the page loads, everything works fine, but there is a functionality that hides some elements in a different order and the class "large" needs to be added only to visible elements and in this case :nth-child() does not work anymore, since the numbering goes on all child elements regardless of whether it is visible or hidden.

You need to add the class "large" to all elements that can be selected using the pseudo :nth-child(8n+3) class :nth-child(8n+3) :nth-child(8n+6) :nth-child(6n+3) :nth-child(6n+4) :nth-child(4n+2) :nth-child(4n+3) , above was just an example.

  • Instead of a pseudo-class , just loop through the elements and loop on the right class to hang - Russian Bear
  • I think that you need to somehow rework the logic of hanging this class. Hanging a class at the same time on such a number of seemingly random selectors seems to be something elusively wrong. - Sasha Omelchenko
  • Try the $ .is () construction. For example: $ ('. Item'). Is (': visible') - Alexandr Kiseloy

1 answer 1

From the very beginning, run the addClassLarge() function, which removes the added large class everywhere, and then passes through the visible elements using the selector :visible and conditionally (index + 1) % 3 == 0 (which equals the selector :nth-child(3n + 3) ) adds a large class.

Then it’s just enough to restart this function when hiding elements.

 $(function() { addClassLarge(); $('button').click(function() { $('.item:visible').each(function(index) { if((index + 1) % 2 == 0) { $(this).hide(); } }); addClassLarge(); }); function addClassLarge() { $('.item').removeClass('large'); $('.item:visible').each(function(index) { if((index + 1) % 3 == 0) { $(this).addClass('large'); } }); } }); 
 .item { display: inline-block; width: 100px; height: 100px; border: 1px solid; margin-bottom: 4px; } .item.large { border-color: red; } button { position: absolute; right: 8px; top: 8px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> <div class="item">12</div> <div class="item">13</div> <div class="item">14</div> <div class="item">15</div> <div class="item">16</div> <div class="item">17</div> <div class="item">18</div> <div class="item">19</div> </div> <button>Hide some elements</button>

  • Sasha Omelchenko, tried this option, but faced the problem of writing these very conditions, in fact, as now ... could you write a condition that is exactly, for example, the selector: nth-child (8n + 3), to catch the meaning , and the rest I think I'll write myself. - Andrii Tiuliupa
  • jsfiddle.net/bwwrsqbk here's an example with a few formulas. - Sasha Omelchenko
  • Thank you very much. - Andrii Tiuliupa
  • @AndriiTiuliupa if the answer helped you, then answer it accepted. - Sasha Omelchenko