jQuery добавить класс только видимым блокам по их индексу в выборке

188

20 апреля 2017, 14:33

Проблема заключается в следующем, есть HTML, к примеру:

<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>

Нужно добавить класс "large" всем элементам, соответствующим селектору :nth(2n+3):

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

При загрузке страницы все работает отлично, но есть функционал, который скрывает некоторые элементы в различном порядке и класс "large" нужно добавлять только видимым элементам и в таком случае :nth-child() уже не работает, так как нумерация идет по всем дочерним элементам, независимо от того, видим он или скрыт.

Нужно добавить класс "large" всем элементам, которые можно выбрать с помощью псевдокласса :nth-child(8n+3), :nth-child(8n+6), :nth-child(6n+3), :nth-child(6n+4), :nth-child(4n+2), :nth-child(4n+3), выше был просто как пример.

Answer 1

С самого начала запустим функцию addClassLarge(), которая убирает везде добавленный класс large, а затем проходит по видимым элементам при помощи селектора :visible и по условию (index + 1) % 3 == 0 (что равняется селектору :nth-child(3n + 3)) добавляет класс large.

Затем просто достаточно при скрытии элементов перезапускать эту функцию.

$(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>