Положения TD в TR

Question

У меня есть вид, где я стилизации TD элемента, основанный на согласованном содержании

$(".myTable td:contains('red')").each(function() { 
    $(this).addClass('myClass'); 
      var nth = $(this).index(); 
}); 

Он работает отлично. Теперь мне нужно создать TD в строке ниже. Поэтому я подумал, что могу рассчитать положение этого TD и применить к следующему TR

$(".myTable td:contains('red')").each(function() { 
    $(this).addClass('myClass'); 

    var tdNth= $(this).index(); 

    $(this).parent().next('tr').find('td:nth-child(tdNth)).addClass('myClass'); 
}); 

Однако это не работает. Что мне не хватает?

Answer 1

Вы пытаетесь «интерполировать» переменную в константу строки. Это не работает.

Хотя вы могли использование конкатенации для создания соответствующего :nth-child() псевдо-селектор, на мой опыт делает так хрупок и подвержен ошибкам, поэтому я стараюсь избегать делать это везде, где это возможно.

Вместо этого попробуйте:

$(this).parent().next('tr').children().eq(tdNth).addClass('myClass'); 

Вышесказанное также позволяет избежать «офф-на-один» ошибка код пришлось бы так .index() возвращает Нулевое смещение, но nth-child использует один на основе смещения.

Answer 2

Если строки таблицы используйте th для первого столбца, а затем код:

var tdNth= $(this).index(); 

будет индекс td в том числе, что th, так что если это третий столбец и первый столбец th , tdNth будет 3, который не будет работать с:

$(this).parent().next('tr').children('td').eq(tdNth).addClass('myClass'); 

потому eq(tdNth) будет выбор на основании индекса соответствия td с, что бы быть вторым в своем ряду выше, а не третьим. Поэтому вместо того, чтобы использовать:

var tdNth = $(this).parent().children('td').index($(this)); 
$(this).parent().next('tr').children('td').eq(tdNth).addClass('myClass'); 

Это гарантирует, что индекс для обоих основаны на индексе td с и позволяет избежать проблем, внедорожных одним. ..

http://jsfiddle.net/55krupq2/3/