Wählen Sie das erste Element aus mehreren Sets

Question

Ich habe ein peinliches Problem, weil ich eine Shedload von wirklich, wirklich schlecht formatiertem HTML geerbt habe.

Im Prinzip habe ich einige Tabellenzeilen wie folgt aus:

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

Und was ich brauche, ist ein jQuery-Selektor, der mir das erste Element eines jeden Blocks von Klassen geben wird. Ist das klar genug? Ich bin nicht sicher, wie ich es sonst noch erklären könnte.

So im Beispielfall würde ich möchten die Zeilen 1, 4 und 7.

Ive dies bisher getan, indem jedes n-te Kindes Auswahl, aber Ive jetzt diese nicht funktionieren realisiert, da es immer die gleiche Zahl sein wont von Reihen in jedem Block von Klassen.

Jede Hilfe euch geben kann man erkennen, wie immer :)

Prost!

Answer 1

Sie benötigen eine strategische Nutzung von :not() und benachbarten Geschwister-Selektoren verwenden:

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

die tr:not(...) + tr... Bits wählen Sie eine beliebige tr Element, das direkt von einem tr voraus ist, die nicht die gleiche Klasse Namen hat. Sie können das nicht dynamisch (z. B. mit einer Art Platzhalter), aber es ist durchaus möglich, wenn Sie jeden Klassennamen separat angeben. Dadurch wird sichergestellt, dass Sie nur das erste Element in jeder zusammenhängenden Gruppe auswählen.

Der Grund für die :first-child Pseudo erforderlich ist, ist einfach, weil + das erste Kind nicht überein, da es eine Beziehung zwischen einem Element und seiner vorhergehenden Geschwister impliziert. Beachten Sie, dass :first-child nur für die erstetr gilt. Sie könnten tr.odd:first-child, tr.even:first-child durch einfach tr:first-child ersetzen, wenn jedes tr Element genau einen der beiden Klassennamen hat, aber ich gebe sie aus Gründen der Übersichtlichkeit an.

Nicht zuletzt ist dies ein gültiger CSS-Selektor, den Sie auch in einem Stylesheet verwenden können, wenn Sie möchten.

Answer 2

Schleife durch und prüfen Sie, ob das aktuelle Element das letzte übereinstimmt, ansonsten ist es das erste seiner Reihe:

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

Dieser Vorgang dauert nur irgendein .odd Element, das kein anderes .odd folgt, und jede .even Element, das kein anderes .even Element folgt.

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

dies möglicherweise

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

Erklärung helfen: Schleife lastGroup gleich durch alle TR und überprüfen, ob der Klassenname (this.className). wenn nicht gleich, haben wir eine neue Gruppe (erstes Element der Gruppe). Wenn gleich, ignoriere und fahre fort. Dies funktioniert mit jedem verwendeten Klassennamen.

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