Самый эффективный способ вызвать состояние наведения для нескольких элементов nth-child в jquery

Question

У меня есть таблица, где верхняя граница первого, второго и третьего тд в первом тр должна изменить цвет при наведении соответствующего тд.

Мое ограничение заключается в том, что я больше не могу использовать классы или идентификаторы, потому что эти стили таблиц будут использоваться людьми, которые практически не имеют опыта написания кода, они просто выбирают таблицу в нашей cms и добавляют один класс и идентификатор к ней .

У меня работает код (см. Нижний фрагмент), но я хочу закодировать его максимально эффективно для следующего дочернего объекта.

Я мог бы сделать это:

$("#table1 td:nth-child(1)").hover(function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(1)").addClass("table-compare-border-hover");
}, function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(1)").removeClass("table-compare-border-hover");
});

$("#table1 td:nth-child(2)").hover(function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(2)").addClass("table-compare-border-hover");
}, function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(2)").removeClass("table-compare-border-hover");
});

$("#table1 td:nth-child(3)").hover(function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(3)").addClass("table-compare-border-hover");
}, function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(3)").removeClass("table-compare-border-hover");
});

Но это кажется ужасно неэффективным, особенно если на странице может быть до 4 таблиц, тогда мне нужно будет повторить приведенный выше код для # table1, # table2, # table3 и # table4

Ниже мой полный код

$("#table1 td:nth-child(1)").hover(function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(1)").addClass("table-compare-border-hover");
}, function() {
  $("#table1.table-equal-compare-3 tr:nth-child(1) td:nth-child(1)").removeClass("table-compare-border-hover");
});

.table-equal-compare-3 tr:nth-child(1) {
  border-top: solid 2px #e6e6e6;
}

table.table-equal-compare-3 td {
  text-align: center;
  padding: 8px;
  vertical-align: bottom;
  padding-top: 10px;
}

.table-compare-border-hover {
  border-top: solid 2px #000;
  -webkit-transition: border-top-color 500ms linear;
  -ms-transition: border-top-color 500ms linear;
  transition: border-top-color 500ms linear;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" class="table-equal-compare-3" id="table1">
  <tbody>
    <tr>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-001</strong></td>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-002</strong></td>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-004</strong></td>
    </tr>
    <tr>
      <td width="240">
        <div>2 Zenders&nbsp;(AXIWI AT-320 LD)</div>
        <div>2 Sportheadsets</div>
        <div>Transportkoffer</div>
      </td>
      <td width="240">
        <div>3&nbsp;Zenders&nbsp;(AXIWI AT-320 LD)</div>
        <div>3&nbsp;Sportheadsets</div>
        <div>• Transportkoffer</div>
      </td>
      <td width="240">
        <div>5 Zenders (AXIWI AT-320 LD)</div>
        <div>5 Sportheadsets</div>
        <div>Transportkoffer</div>
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Я бы использовал index(), чтобы получить индекс текущей ячейки в строке, а затем использовал бы его для добавления и удаления класса в первой строке:

var table = $('.table-equal-compare-3'),
    firstRowTDs = table.find('tr').eq(0).children();  // cache the first row tds for better performance
    
table.find('td').hover(function() {
  var index = $(this).index();
  
  if (index < 3) {  // only do this to first three columns
    firstRowTDs
      .removeClass('hovered') // remove all classes
      .eq(index)    // get the item that matches the index of the hovered element
      .addClass('hovered');   // add top border
  }
}, 
function () {
  firstRowTDs.removeClass('hovered');  // remove top border
});

.table-equal-compare-3 tr:nth-child(1) {
  border-top: solid 2px #e6e6e6;
}

table.table-equal-compare-3 td {
  text-align: center;
  padding: 8px;
  vertical-align: bottom;
  padding-top: 10px;
}

table.table-equal-compare-3 tr:first-child td {
  border-top: solid 2px transparent;
  -webkit-transition: border-top-color 500ms linear;
  -ms-transition: border-top-color 500ms linear;
  transition: border-top-color 500ms linear;
}

table.table-equal-compare-3 tr:first-child td.hovered {
  border-color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" class="table-equal-compare-3" id="table1">
  <tbody>
    <tr>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-001</strong></td>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-002</strong></td>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-003</strong></td>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-004</strong></td>
    </tr>
    <tr>
      <td width="240">
        <div>2 Zenders&nbsp;(AXIWI AT-320 LD)</div>

        <div>2 Sportheadsets</div>

        <div>Transportkoffer<br> &nbsp;
        </div>
      </td>
      <td width="240">
        <div>3&nbsp;Zenders&nbsp;(AXIWI AT-320 LD)</div>

        <div>3&nbsp;Sportheadsets</div>

        <div>• Transportkoffer<br> &nbsp;
        </div>
      </td>
      <td width="240">
        <div>5 Zenders (AXIWI AT-320 LD)</div>

        <div>5 Sportheadsets</div>

        <div>Transportkoffer<br> &nbsp;
        </div>
      </td>
      <td width="240">
        <div>extra column that doesn't have hover on top</div>
      </td>
    </tr>

  </tbody>
</table>

Answer 2

Вместо этого вы можете использовать более подходящий селектор CSS. Ниже приведен чистый CSS3-селектор:

td:nth-child(-n + 3)

... соответствует всем элементам td, которые являются 1-м, 2-м и 3-м дочерним элементом своего родителя. Ваш код может быть упрощен следующим образом:

$("#table1 td:nth-child(-n + 3)").hover(function() {
  var n = $(this).index() + 1;
  $("#table1 tr:nth-child(1) td:nth-child(" + n + ")").addClass("table-compare-border-hover");
}, function() {
  var n = $(this).index() + 1;
  $("#table1 tr:nth-child(1) td:nth-child(" + n + ")").removeClass("table-compare-border-hover");
});

.table-equal-compare-3 td {
  border-top: solid 2px transparent;
  transition: border-top-color 500ms linear;
  padding: 10px 20px;
}

td.table-compare-border-hover {
  border-top-color: #000000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="0" class="table-equal-compare-3" id="table1">
  <tbody>
    <tr>
      <td>Label 1</td>
      <td>Label 2</td>
      <td>Label 3</td>
      <td>Label 4</td>
    </tr>
    <tr>
      <td>Value 1</td>
      <td>Value 2</td>
      <td>Value 3</td>
      <td>Value 4</td>
    </tr>
  </tbody>
</table>

Answer 3

Нет необходимости использовать Javascript. Простой CSS сделает это за вас.

table tr:first-child > td:hover {
  background-color: red;
  color: white;
}

<table border="0" class="table-equal-compare-3" id="table1">
  <tbody>
    <tr>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-001</strong></td>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-002</strong></td>
      <td style="text-align: center;"><strong>Axitour AXIWI REF-004</strong></td>
    </tr>
    <tr>
      <td width="240">
        <div>2 Zenders&nbsp;(AXIWI AT-320 LD)</div>
        <div>2 Sportheadsets</div>
        <div>Transportkoffer<br> &nbsp;
        </div>
      </td>
      <td width="240">
        <div>3&nbsp;Zenders&nbsp;(AXIWI AT-320 LD)</div>
        <div>3&nbsp;Sportheadsets</div>
        <div>• Transportkoffer<br> &nbsp;
        </div>
      </td>
      <td width="240">
        <div>5 Zenders (AXIWI AT-320 LD)</div>
        <div>5 Sportheadsets</div>
        <div>Transportkoffer<br> &nbsp;
        </div>
      </td>
    </tr>
  </tbody>
</table>