Addclass if length % 3 == 1 or == 2

Posted 2023-03-16

【中文标题】Addclass if length % 3 == 1 or == 2

【英文标题】：

【发布时间】：2019-03-19 17:04:18

【问题描述】：

我有几个网格，每行按 3 个项目列出，如果最后一行只有 1 个项目，我需要将类添加到最后一个项目，如果有 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>

你能帮我解决这个问题吗？我做错了什么？ 提前谢谢你...

【问题讨论】：

if ($('.item').length % 3 == 2) 在特定行的项目之前使用 $(this)

我不知道为什么，每个代码对我来说看起来都不错......但是每次我得到最后一个项目的 'col-lg-offset-4' 时，即使有 5 个项目列表....

【参考方案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');
  
);

【讨论】：

是的，这是我的问题，我无法解决！谢谢

【参考方案2】：

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

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

【讨论】：

但我不仅有一行.. 我有几行，每行都有一个项目列表

我认为这很好，但它错过了代码中的“else if”，否则它会给出 2 个类.. 无论如何谢谢

我个人避免嵌套 if，无论如何这两种方法都有效。

【参考方案3】：

试试这个

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