Jquery выбирает неправильную группу таблицы

Question

У меня есть следующие две таблицы. Я хотел бы, чтобы colgroups для каждой из них выделялись при наведении мыши, используя jquery.

<div id="one">
    <table border=1>
        <colgroup><colgroup><colgroup><colgroup>
            <thead>
                <tr>
                        <th>A</th>
                        <th>B</td>
                        <th>C</th>
                        <th>D</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                </tr>
            </tbody>
    </table>
</div>
<div id="two">
    <table border=1>
        <colgroup><colgroup><colgroup><colgroup><colgroup><colgroup>                        
            <thead>
                <tr>
                         <th>A</th>
                         <th>B</th>
                         <th>C</th>
                         <th>D</th>
                         <th>E</th>
                         <th>F</th>
                </tr>
            </thead>
                <tbdoy>
                <tr>
                         <td>1</td>
                         <td>2</td>
                         <td>3</td>
                         <td>4</td>
                         <td>5</td>
                         <td>6</td>
                </tr>
           </tbody>
       </table>
</div>

Вот Jquery:

$("table").delegate('td, th','mouseover mouseleave', function(e) {
              if (e.type == 'mouseover') {
                $("colgroup").eq($(this).index()).addClass("hover");
              }
              else {
                $("colgroup").eq($(this).index()).removeClass("hover");
              }
          });    

JQuery работает для первой таблицы, но когда я перехожу к первому столбцу второй таблицы, выделяется столбец FIRST из таблицы FIRST. Все столбцы 1-4 таблицы 2 выделяют столбец 1-4 таблицы 1. Когда я делаю ПЯТЫЙ столбец во второй таблице, выделяется ПЕРВЫЙ столбец в ВТОРОЙ таблице. И шестой столбец выделяет второй столбец.

Почему все так смещено?

Answer 1

Я думаю, что приведенный ниже код решит вашу проблему, но это долгий день, поэтому он может быть не идеальным:) Главное, вам нужно сократить коллекцию colgroup до текущей таблицы, которая будет накрыта.

$("table").delegate('td, th','mouseover mouseleave', function(e) {
          var $table = $(this).closest("table");
          if (e.type == 'mouseover') {
            $table.children("colgroup").eq($(this).index()).addClass("hover");
          }
          else {
            $table.children("colgroup").eq($(this).index()).removeClass("hover");
          }
      });