Добавьте класс, если длина% 3 == 1 или == 2 - PullRequest
Новая
       54

Добавьте класс, если длина% 3 == 1 или == 2

0 голосов
/ 15 октября 2018

У меня есть несколько сеток, перечисленных по 3 элемента в каждой строке, и мне нужно добавить addClass к последнему элементу, если в последней строке есть только 1 элемент, или addClass к элементу «до последнего», если есть 2 элемента впоследний ряд.

см. ниже: 

$('.row').each(function(){
  if ($('.item').length % 3 == 2){
    $(this).find('.item').last().addClass('col-lg-offset-4');
  } else if ($('.item').length % 3 == 1){
    $(this).find('.item').last().prev().addClass('col-lg-offset-2');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

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

Можете ли вы помочь мне с этим?Что я делаю не так?Заранее спасибо ...

Ответы [ 3 ]

0 голосов
/ 15 октября 2018

Попробуйте что-то вроде этого, я не проверял, но должен дать вам подсказку. 

$('.row').each(function(){
    // Calculate Last Item Count
    var lastItem = $(this).find('.item').last();
    var lastItemCount = lastItem.length
    // I need to addClass to the last item if in the last row there is only 1 item
    if (lastItemCount == 1) {
        lastItem.addClass('col-lg-offset-4');
    }
    // or addClass to the 'before last' item if there are 2 items in the last row.
    if (lastItemCount == 2) {
        lastItem.prev().addClass('col-lg-offset-2');
    }
});
0 голосов
/ 15 октября 2018

Ваш код работает нормально, единственная проблема в том, что при итерации каждого .row div вы ищете 

$('.item').length

, который фактически будет искать все div с классом .item на всей странице, а не толькоВ существующей строке вы находитесь внутри, решение состоит в том, чтобы найти элементы внутри этой конкретной строки div, используя 

$(this).find('.item').length

, поэтому ваш код должен быть 

$('.row').each(function(){
  var itemsCount = $(this).find('.item').length;
  if (itemsCount % 3 == 2){
     $(this).find('.item').last().addClass('col-lg-offset-4');
  } else if (itemsCount % 3 == 1){
     $(this).find('.item').last().prev().addClass('col-lg-offset-2');
  }
});
0 голосов
/ 15 октября 2018

попробуйте 

$('.row').each(function(){
  if ($(this).find('.item').length % 3 == 2){
    $(this).find('.item').last().addClass('col-lg-offset-4');
  } else if ($(this).find('.item').length % 3 == 1){
    $(this).find('.item').last().prev().addClass('col-lg-offset-2');
  }
});

ДЕМО ЗДЕСЬ

...