javascript - tag - Seleccione el primer elemento de varios conjuntos

title of page html

Question

Tengo un problema incómodo, debido a que he heredado una gran cantidad de HTML con muy, muy mal formato.

Básicamente tengo algunas filas de tablas como esta:

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

Y lo que necesito es un selector jQuery que me dará el primer elemento de cada bloque de clases. ¿Está eso suficientemente claro? No estoy seguro de cómo explicarlo.

Entonces, en el caso de ejemplo, querría las filas 1, 4 y 7.

He hecho esto hasta ahora seleccionando a cada n nto. Pero ahora me he dado cuenta de que esto no funcionará ya que no siempre habrá el mismo número de filas en cada bloque de clases.

Cualquier ayuda que ustedes puedan darle apreciado, como siempre :)

¡Aclamaciones!

Answer 1

Deberá emplear algún uso estratégico de :not() y selectores de hermanos adyacentes:

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

Los bits tr:not(...) + tr... seleccionan cualquier elemento tr que esté precedido directamente por un tr que no tenga el mismo nombre de clase. No puede hacer esto dinámicamente (por ejemplo, con algún tipo de comodín), pero es completamente posible si especifica cada nombre de clase por separado. Esto asegurará que solo seleccione el primer elemento en cada grupo contiguo.

La razón por la que se requiere :first-child pseudo :first-child es simplemente porque + no coincide con el primer hijo, ya que implica una relación entre un elemento y su hermano anterior. Tenga en cuenta que :first-child cuentas del :first-child para el primer tr . Podría reemplazar tr.odd:first-child, tr.even:first-child con simplemente tr:first-child si cada elemento tr tendrá exactamente uno de los dos nombres de clase, pero los especifico de todos modos por el bien de Clarity.

Por último, pero no menos importante, esto se dobla como un selector de CSS válido, por lo que también puede usarlo en una hoja de estilo si lo desea.

Answer 2

Recorra y verifique si el elemento actual coincide con el último, de lo contrario es el primero de su conjunto:

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

esto puede ayudarte

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

explicación: recorra todo el TR y verifique si el nombre de la clase (this.className) es igual a lastGroup. Si no es igual, tenemos un nuevo grupo (primer elemento del grupo). Si es igual, ignora y continúa. esto funcionará con cualquier nombre de clase usado.

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

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

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

Esto solo toma cualquier elemento .odd que no esté siguiendo a otro .odd , y cualquier elemento .even que no esté siguiendo a otro elemento .even .