Question

我有一组动态创建的div s。这些div具有两个类.a或.b中的一个，用于定义它们的着色方式。这些div遵循某些规则：

如果一行中有两个或两个以上相同的div，则该组的最后一个div应该是彩色的
.a为红色
.b为蓝色

我目前正在尝试使用以下选择器

//trying to color all final as
$('.a').nextUntil('.b').addBack().removeClass('colored');
$('.a').nextUntil('.b').addBack().last().addClass('colored');

//trying to color all final bs using not
$('.b').nextUntil(':not(.b)').addBack().removeClass('colored');
$('.b').nextUntil(':not(.b)').addBack().last().addClass('colored');

.a{
  float:left;
  text-align:center;
  display:block;
  width:30px;
  height:30px;
  background-color:#eee;
}
.b{
  float:left;
  text-align:center;
  display:block;
  width:30px;
  height:30px;
  background-color:#eee;
}
.a.colored{
  background-color:red;
}
.b.colored{
  background-color:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="a">a1</div>
<div class="a">a2</div>
<div class="a">a3</div>
<div class="b">b1</div>
<div class="b">b2</div>
<div class="b">b3</div>
<div class="a">a4</div>
<div class="a">a5</div>
<div class="b">b4</div>
<div class="a">a6</div>
<div class="b">b5</div>

我希望将此标记为a3，a5和a6为红色，并为b3，b4和b5着色蓝色。但是，它似乎只影响每个班级的最后一个div（a6和b5）。

是否可以使用nextUntil()为同一类的每个顺序集的最后一个div着色？如果没有，我可以用它来做什么？

Answer 1

这有效

$('.a').each(function(){
    var $sibling = $(this).next();

  if($sibling.hasClass('b') || $(this).is(':last-child')){
    $(this).addClass('colored');
  }

});

$('.b').each(function(){
    var $sibling = $(this).next();

  if($sibling.hasClass('a') || $(this).is(':last-child')){
    $(this).addClass('colored');
  }

});

https://jsfiddle.net/webyhyxb/

Answer 2

简单的解决方案

$('.b').prev('.a').addClass('colored').end().last().addClass('colored')

$('.a').prev('.b').addClass('colored').end().last().addClass('colored');

在工作小提琴下面

https://jsfiddle.net/ztqspovn/

Answer 3

this is for dynamic solution . we can write N number of classes for this

https://jsfiddle.net/ztqspovn/4/

使用JQuery nextUntil从除多个集合中的最后一个之外的所有div中删除Class

3 个答案: