Question

我有几个网格，每行3个项目，如果在最后一行中只有1个项目，则需要将addClass添加到最后一个项目；如果在“最后一个”项目中有2个项目，则需要将addClass添加到“最后一个项目”中最后一行。

请参见下文

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

您能帮我吗？我做错了什么？预先谢谢你...

Answer 1

您的代码运行良好，唯一的问题是，在迭代每个要查找的.row div时

$('.item').length

它实际上将在整个页面中查找类为.item的所有div，而不仅是您位于其中的现有行，解决方案是使用

在该特定行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');
  }
});

Answer 2

尝试

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

Answer 3

尝试类似的方法，我还没有测试过，但是应该给您提示。

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

如果长度％3 == 1或== 2

3 个答案: