Применить функцию ко всем таблицам в одном и том же Div с ID - jQuery Show/Hide

Question

У меня довольно простая проблема с большим количеством разметки для навигации. Я загрузил файл, в котором есть все в одном .html для просмотра. Это слишком долго, чтобы публиковать здесь (разметка @ 1500 строк), но я могу дать строки # key notes.

http://www.sinsysonline.com/repair/price.html

JQuery:

<script> 
    (function() { 

     $('tr.catTr td').not('.category').hover(function() { 

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

      $('tr.priceRow td').eq(priceSel).addClass('price_hover'); 
      $('tr.priceRow2 td').eq(priceSel).addClass('price_hover'); 
      $('tr.catTr td:nth-child(' + (priceSel + 1) + ')').addClass('vertFilt'); 
      $(this).parent('tr').find('td.category').addClass('category_hover'); 
      $(this).parent('tr').find('td').not('.category').addClass('rowHov'); 

     }, function() { 
      var priceSel = $(this).index(); 
      $('tr.priceRow td').eq(priceSel).removeClass('price_hover'); 
      $('tr.priceRow2 td').eq(priceSel).removeClass('price_hover'); 
      $('td.vertFilt').removeClass('vertFilt'); 
      $(this).parent('tr').find('td.category').removeClass('category_hover'); 
      $(this).parent('tr').find('td').removeClass('rowHov'); 
     }); 

})(); 
</script> 

Проблема, как представляется, что моя функция специально для вертикальной подсветки (рабочий стол/ноутбук/сервер), а также мое вторичное событие на день , работает только для Выкл. страница.

Позвольте мне дать свою теорию на данный момент ...

Каждая таблица имеет идентификатор 'цены': 4 в общей сложности линии: 348, 541, 735, 968 . Мой CSS разбивает горизонтальное позиционирование, если я делаю его классом вместо ID.

Я был под впечатлением, что несколько идентификаторов в порядке, до тех пор, как только одна видно одновременно: например: http://www.sinsysonline.com/repair/contact.html

Является ли это причина того, что только первая страница выделения верхнего и пониженные зависающие системы или что-то еще в игре?

Есть ли что-то, что я могу исправить здесь, чтобы нацелить только видимую таблицу?

var priceSel = $(this).index(); 
     $('tr.priceRow td').eq(priceSel).addClass('price_hover'); 
     $('tr.priceRow2 td').eq(priceSel).addClass('price_hover'); 

Еще раз:

http://www.sinsysonline.com/repair/price.html

Answer 1

<script> 
    (function() { 

     $('tr.catTr td').not('.category').hover(function() { 

      var priceSel = $(this).index(); 
      console.log(priceSel); 
      $(this).closest('table').find('tr.priceRow td').eq(priceSel).addClass('price_hover'); 
      $(this).closest('table').find('tr.priceRow2 td').eq(priceSel).addClass('price_hover'); 
      $('tr.catTr td:nth-child(' + (priceSel + 1) + ')').addClass('vertFilt'); 
      $(this).closest('tr').find('td.category').addClass('category_hover'); 
      $(this).closest('tr').find('td').not('.category').addClass('rowHov'); 

     }, function() { 
      var priceSel = $(this).index(); 
      $(this).closest('table').find('tr.priceRow td').eq(priceSel).removeClass('price_hover'); 
      $(this).closest('table').find('tr.priceRow2 td').eq(priceSel).removeClass('price_hover'); 
      $('td.vertFilt').removeClass('vertFilt'); 
      $(this).closest('tr').find('td.category').removeClass('category_hover'); 
      $(this).closest('tr').find('td').removeClass('rowHov'); 
     }); 

})(); 
</script> 

устраняет проблему