选择子集中的第一个

Question

我有一个像这样的 DOM；

<li></li>
<li class="this"></li>
<li class="this"></li>
<li></li>
<li></li>
<li class="this"></li>
<li class="this"></li>
<li class="this"></li>
<li></li>
<li class="this"></li>
<li></li>
<li></li>

我只想选择每个连续 this 系列中的第一个 li。

因此，如果我将 .addClass("that") 应用于此选择器的对象，则生成的 DOM 将如下所示；

<li></li>
<li class="this that"></li>
<li class="this"></li>
<li></li>
<li></li>
<li class="this that"></li>
<li class="this"></li>
<li class="this"></li>
<li></li>
<li class="this that"></li>
<li></li>
<li></li>

实现这种效果的最有效方法是什么？我无法添加或删除 DOM 中的任何元素（因此，例如将连续的系列包装在它们自己的包装器 div 中是不可能的）。

预先非常感谢！

Answer 1

这行得通吗？

$("li:not(.this) + .this").addClass('that');

编辑：如果第一项是 this 类，则不起作用，您将需要它（如果适用）：

$("li:not(.this) + .this, .this:first-of-type").addClass('that');

Answer 2

$('.this').each(function(){
    if($(this).prev().hasClass('this')==false){
        $(this).addClass('that');
    }
});

循环遍历具有 this 类的所有元素，如果其前一个同级元素没有相同的类，则向其中添加 that