代码之家 › 专栏 › 技术社区 › aflyzer

Addclass如果长度%3==1或==2

modulo each list jquery

0

aflyzer · 技术社区 · 6 年前

见下表:

$('.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 回复 | 直到 6 年前

1

2

Ahmed Farahat 6 年前

$('.item').length

它实际上会在整个页面中查找所有带有class.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');
  }
});

2

0

Kiranramchandran 6 年前

$('.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');
  }
});

DEMO HERE

3

0

Ibrahim Azhar Armar 6 年前

试试这样的,我还没测试过,但应该给你一个提示。

$('.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');
    }
});