Выберите первый элемент из нескольких наборов

У меня есть неудобная проблема из-за наследования shedload действительно, действительно плохо отформатированного 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-й ребенок, но теперь я понял, что это не работает, поскольку в каждом блоке классов всегда будет одинаковое количество строк.

Любая помощь, которую вы, ребята, можете дать ей, как всегда:)

Ура!

Ответы

Ответ 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, поэтому вы можете использовать его и в таблице стилей, если хотите.

Ответ 2

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

Это просто принимает любой элемент .odd, который не следует за другим .odd и любым элементом .even, который не следует за другим элементом .even.

Ответ 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/

Ответ 4

Прокрутите и проверьте, соответствует ли текущий элемент последнему, иначе он будет первым из его набора:

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

Ответ 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?   
    }
 });