寻找第一个和最后一个类来使用 javascript 对项目进行分组 [英] Looking for a first and last class for grouping items with javascript

问题描述

我的要求与 get first 和 last 方法的传统方法略有不同，因此请高手帮忙.

我会用代码示例来解释

我的代码结构是

<div class="group-a"></div><div class="group-a"></div><div class="group-a"></div><div class="group-a"></div><div class="group-b"></div><div class="group-b"></div><div class="group-b"></div><div class="group-a"></div><div class="group-a"></div><div class="group-a"></div>

当我使用像下面这样的 jquery 方法时

$('div.group-a:first').addClass('first');$('div.group-a:last').addClass('last');

结果就像

<div class="group-a first"></div><div class="group-a"></div><div class="group-a"></div><div class="group-a"></div><div class="group-b"></div><div class="group-b"></div><div class="group-b"></div><div class="group-a"></div><div class="group-a"></div><div class="group-a last"></div>

但我希望结果应该如下所示，每个组的第一节课和最后一节课.

<div class="group-a first"></div><div class="group-a"></div><div class="group-a"></div><div class="group-a last"></div><div class="group-b"></div><div class="group-b"></div><div class="group-b"></div><div class="group-a first"></div><div class="group-a"></div><div class="group-a last"></div>

是否可以使用 javascript 或 jquery?

解决方案

当您可以使用 CSS 相邻同级选择器和 :not 时，为什么要遍历类?这是一个更简洁的方法！

//先添加$(':not(.group-a) + .group-a, .group-a:first').addClass('first');//最后添加$('.group-a:last').addClass('last');$('.group-a + :not(.group-a)').prev().addClass('last');

请注意，这适用于任意数量的 group-a 和 group-b，以及其他类，例如 group-c，按照要求.prev() 是必需的，因为对于 CSS 邻接选择器，只能选择第二个元素，而不是第一个元素.希望这会有所帮助！

此处演示

My requirement is slightly different from the traditional method for get first and last method, so I am asking expert help.

I will explain with code sample

My code structure is

<div class="wrap">
<div class="group-a"></div>
<div class="group-a"></div>
<div class="group-a"></div>
<div class="group-a"></div>
<div class="group-b"></div>
<div class="group-b"></div>
<div class="group-b"></div>
<div class="group-a"></div>
<div class="group-a"></div>
<div class="group-a"></div>
</div>

When I use a jquery method like below

$('div.group-a:first').addClass('first');
$('div.group-a:last').addClass('last');

Result is like

<div class="wrap">
<div class="group-a first"></div>
<div class="group-a"></div>
<div class="group-a"></div>
<div class="group-a"></div>
<div class="group-b"></div>
<div class="group-b"></div>
<div class="group-b"></div>
<div class="group-a"></div>
<div class="group-a"></div>
<div class="group-a last"></div>
</div>

But I want the result should be like below with first and last class for each group.

<div class="wrap">
<div class="group-a first"></div>
<div class="group-a"></div>
<div class="group-a"></div>
<div class="group-a last"></div>
<div class="group-b"></div>
<div class="group-b"></div>
<div class="group-b"></div>
<div class="group-a first"></div>
<div class="group-a"></div>
<div class="group-a last"></div>

Is it possible with javascript or jquery?

解决方案

Why iterate through the classes when you can use CSS adjacent sibling selectors and :not? Here's a much cleaner method!

// adding first
$(':not(.group-a) + .group-a, .group-a:first').addClass('first');

// adding last
$('.group-a:last').addClass('last');
$('.group-a + :not(.group-a)').prev().addClass('last');

Note that this works for any number of group-a and group-b, and for other classes such as group-c, as requested. The prev() is needed because for the CSS adjacency selector, only the second element, not the first, may be selected. Hope this helps!

Demo Here

这篇关于寻找第一个和最后一个类来使用 javascript 对项目进行分组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！