1

Проблема заключается в следующем, есть 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), выше был просто как пример.

3
  • Вместо псевдокласса просто перебрать элементы циклом и на нужные повесить класс
    – user212578
    Commented 18 апр. 2017 в 16:34
  • Думаю, что вам надо как-то переработать логику навешивания этого класса. Навешивать класс одновременно на такое количество с виду рандомных селекторов кажется чем-то неуловимо неправильным. Commented 18 апр. 2017 в 16:43
  • Попробуйте применить конструкцию $.is() Например: $('.item').is(':visible') Commented 18 апр. 2017 в 16:56

1 ответ 1

0

С самого начала запустим функцию 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>

4
  • Sasha Omelchenko, пробовал этот вариант, но столкнулся с проблемой написания этих самых условий, собственно, как и сейчас...не могли бы вы написать условие, которое ровно, к примеру селектору :nth-child(8n+3), чтобы уловить смысл, а остальные я уже думаю сам напишу. Commented 18 апр. 2017 в 17:52
  • jsfiddle.net/bwwrsqbk вот вам пример с несколькими формулами. Commented 18 апр. 2017 в 18:14
  • Большое спасибо. Commented 18 апр. 2017 в 18:18
  • @AndriiTiuliupa если ответ вам помог, то ответьте его принятым. Commented 26 апр. 2017 в 5:44

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.