Question

我有一个尴尬的问题，因为继承了一堆真正非常糟糕的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个孩子，但我现在意识到这不会起作用，因为每个类块中的行数总是不一样。

任何帮助你们都可以一如既往地赞赏它。）

干杯！

Answer 1

您需要对: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伪的原因仅仅是因为+与第一个子节点不匹配，因为它暗示了元素和之间的兄弟之间的关系。请注意，:first-child仅代表第一个 tr。如果每个tr.odd:first-child, tr.even:first-child元素只有一个类名，则可以用tr:first-child替换tr，但为了清楚起见，我仍然指定它们。

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

Answer 2

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

这只会占用不跟随另一个.odd的任何.odd元素，以及不跟随另一个.even元素的任何.even元素。

Answer 3

这可能会对你有所帮助

$('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。如果不相等，我们有一个新的组（该组的第一个元素）。如果相等，则忽略并继续。这适用于所使用的任何类名。

JSFiddle：http://jsfiddle.net/bq7zB/

Answer 4

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

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

Answer 5

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

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

5 个答案: