Selezionare il primo elemento di più serie

Question

Ho un problema scomodo, dovuto all'ereditarietà di un shedload di HTML veramente, veramente mal formattato.

Fondamentalmente hanno alcune righe della tabella in questo modo:

<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> 

E ciò che serve è un selettore jQuery che mi darà il primo elemento di ciascun blocco di classi. È abbastanza chiaro? Non sono sicuro di come altro spiegarlo.

Quindi, nel caso ad esempio che vorrei righe 1, 4 e 7.

Ive fatto finora selezionando ogni bambino all'ennesima potenza, ma Ive ora realizzato questo non funzionerà come ci non sempre essere lo stesso numero di righe in ogni blocco di classi.

Qualsiasi aiuto voi ragazzi può dare apprezzato, come sempre :)

Cheers!

Answer 1

Avrai bisogno di impiegare un certo uso strategico delle :not() e selettori di fratelli adiacenti:

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

I tr:not(...) + tr... bit selezionare qualsiasi elemento tr che è direttamente preceduto da un tr che non ha lo stesso nome della classe. Non è possibile farlo dinamicamente (ad esempio con una sorta di carattere jolly), ma è del tutto possibile se si specifica separatamente ciascun nome di classe. Questo assicurerà di selezionare solo il primo elemento in ogni gruppo contiguo.

Il motivo è necessaria la :first-child pseudo è semplicemente perché + non corrisponderà il primo figlio, poiché implica una relazione tra un elemento e suo fratello precedente. Si noti che gli account :first-child per lo sono il primotr. È possibile sostituire tr.odd:first-child, tr.even:first-child con semplicemente tr:first-child se ogni elemento tr avrà esattamente uno dei due nomi di classe, ma io li specifica comunque per motivi di chiarezza.

Ultimo ma non meno importante, questo funge anche da selettore CSS valido, quindi puoi utilizzarlo anche in un foglio di stile, se lo desideri.

Answer 2

Loop attraverso e verificare se l'elemento corrente corrisponde l'ultimo, altrimenti è il primo del suo gruppo:

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

Answer 3

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

Questo richiede un qualsiasi elemento .odd che non segue un altro .odd e ogni .even elemento non segue un altro elemento .even.

Answer 4

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

Answer 5

questo può aiutare

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

spiegazione: il ciclo di tutti il ​​TR e verificare se il nome della classe (this.className) è pari a lastGroup. se non è uguale, abbiamo un nuovo gruppo (primo elemento del gruppo). se uguale, ignorare e continuare. questo funzionerà con qualsiasi nome di classe usato.

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