Javascript 选择多个集合中的第一个元素

我有一个棘手的问题，因为我继承了一大堆格式非常非常糟糕的HTML

基本上，我有一些如下表行：

<tr class="odd">...</tr>
<tr class="odd">...</tr>
<tr class="odd">...</tr>
<tr class="even">...</tr>
<tr class="even">...</tr>
<tr class="even">...</tr>
<tr class="odd">...</tr>
<tr class="odd">...</tr>
<tr class="odd">...</tr>

。。。
...
...
...
...
...
...
...
...

我需要的是一个jQuery选择器，它将为我提供每个类块的第一个元素。这够清楚吗？我不知道还能怎么解释

所以在这个示例中，我需要第1、4和7行

到目前为止，我通过选择第n个孩子来做到这一点，但我现在意识到这是行不通的，因为每个类块中的行数并不总是相同的

你们能提供的任何帮助都会得到感激，一如既往：）

---

干杯

循环检查当前元素是否与最后一个元素匹配，否则它是其集合的第一个元素：

var lastClass = false;
$('tr.odd, tr.even').each({ function() {
    lastClass = $(this).attr('class');
    if($(this).attr('class') != lastClass){
        // Do your conditional stuff here
    }
}

---

您需要策略性地使用

：not（）

和相邻同级选择器：

$('tr.odd:first-child, tr.even:first-child, tr:not(.odd) + tr.odd, tr:not(.even) + tr.even')

tr:not（…）+tr..

位选择前面直接有一个不具有相同类名的

tr

元素的任何

tr

元素。您不能动态地执行此操作（例如，使用某种通配符），但如果单独指定每个类名，则完全可以执行此操作。这将确保您只选择每个连续组中的第一个元素

之所以需要

：first child

pseudo，是因为

+

与第一个子元素不匹配，因为它意味着元素与其前一个同级元素之间的关系。请注意，

：第一个子
仅占第一个
tr
。如果每个
tr
元素正好有一个类名，那么可以用简单的
tr:first child
替换
tr.odd:first child，tr.偶数：first child
，但为了清楚起见，我还是指定了它们

最后但并非最不重要的一点是，它兼作有效的CSS选择器，因此如果您愿意，也可以在样式表中使用它

$('tr.odd:not(.odd+.odd),tr.even:not(.even+.even)')

这只需要任何不在另一个
.odd
后面的
.odd
元素，以及任何不在另一个
后面的
偶数
元素。
这可能会对您有所帮助

  var prevClass = '';
  $('tr').each(function(){
    var thisClass = $(this).attr('class');
    if (prevClass === thisClass) {
     //do nothing?   
    } else {
    //push in array? do something to the row?   
    }
 });

$('button').click(function() {
    var lastGroup = ''
    $('.groups tr').each(function() {
        if(lastGroup != this.className) {
            $(this).css('background-color', 'red');
            lastGroup = this.className;
        }
    });
});

解释：遍历所有TR并验证类名（this.className）是否等于lastGroup。如果不相等，我们有一个新的组（组的第一个元素）。如果相等，则忽略并继续。这将适用于使用的任何类名

jsidle:
对于前两个，可以使用
querySelector
返回节点列表中的第一个节点。对于下一个块，我不是100%确定，请让我考虑一下。是否有可能，例如，第一个奇数块存在于3个元素中，第一个偶数块存在于2个元素中，最后一个奇数块存在于4个元素中？@v针对这样的算法设计，你不想考虑静态模式。@RUJordan我只是想知道奇数块是否由相同数量的child组成。
$（'tr.odd tr.偶'）
在这种情况下不选择任何内容。
Try
不是一个好的解释。确保你逐行解释你的答案是什么，否则答案很可能是downvoted不要忘记在循环中设置
lastClass
，否则if条件将始终为true！非常好的解决方案。很遗憾，我刚刚找到了这个解决方案，但你在1分钟前就发布了这个解决方案。@boltclock最后两个选择器将选择什么“tr:not（.odd）+tr.odd，tr:not（.偶）+tr.even'”。@SivaRajini一系列的非奇和奇+相反。真聪明，gjBoltClock@SivaRajini当前位置我用解释更新了我的答案。请解释你的答案。代码转储不是很好的答案！！请对此答案添加解释，以便OP可以学习！这个答案也是正确的。它不应该被否决。我从未以这种方式使用过
：not（）
，它对我来说绝对是一种新用法。@King-King:这是jQuery发明的一种非标准语法。问题在于使用jQuery选择元素，因此答案本身并没有错。但是纯粹主义者可能出于各种原因更喜欢一个有效的CSS选择器，如果事实上可以使用CSS选择器的话。另请参见@BoltClock，谢谢您提供的信息，也许这就是为什么它对我如此陌生的原因。在CSS中，
：not
只接受一个简单的选择器——一个单一的类名、id、伪类，或者可能是一个属性选择器（我忘了）。如果您使用的是特定于jQuery的东西，那么最好将其分开。可能类似于
$（'tr.偶数，tr.odd'）。而不是（'.偶+.偶，.odd+.odd'）
，这将完全避免使用奇数选择器语法。