Выделите несколько строк с конкретными идентификаторами

Question

Ищете решение для выделения <td> элементов в таблице, с конкретными идентификаторами при наведении.

Мой код

$('#orderstable').hover(function() 
 
    { 
 
     $('#id_1').find('td').addClass('hover'); 
 
    }, function() 
 
    { 
 
     $('#id_1').find('td').removeClass('hover'); 
 
    });

#orderstable td 
 
{ 
 
    padding:0.7em; 
 
    border:#969696 1px solid; 
 
} 
 

 
.hover 
 
{ 
 
    background:yellow; 
 
}

<table id="orderstable"> 
 
<thead> 
 
    <tr> 
 
     <th>Proces</th> 
 
     <th>Step 1</th> 
 
     <th>Step 2</th> 
 
     <th>Step 3</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td>Proces 1</td> 
 
     <td id='order_2'>job 2</td> 
 
     <td id='order_1'>job 1</td> 
 
     <td id='order_3'>job 3</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Proces 2</td> 
 
     <td id='order_3'>job 3</td> 
 
     <td id='order_4'>job 4</td> 
 
     <td id='order_1'>job 1</td> 
 
    </tr> 
 
</tbody> 
 
</table>

То, что я пытаюсь достичь при наведении курсора мыши на ячейку тд с идентификатором = «порядка 1», это будет выделить этот <TD>, а также другие td с id = 'order_1'.
Конечно, мне нужна такая же функциональность для других идентификаторов (order_2, order_3 и т. Д.).

Любая идея?

Answer 1

ID должны быть уникальными. Вы должны использовать классы. То есть. class="order1" и $('.order1').addClass(...). Кроме того, ваш JS отключен, поскольку вы выбираете элементы, которых не существует, и таргетируйте td s внутри этих селекторов, а не на самих tds. Для достижения своей цели, я хотел бы сделать что-то вроде этого:

$('#orderstable').on('mouseover', 'td', function() { 
    var elemClass = this.className 
     .split(' ') // Gets array of classes 
     .filter(function(item) { 
      return item.match(/order_\d/) || false; 
     }) // Filter down to classes matching 'order_[NUMBER]' 
     .pop(); // Get the class. (Actually gets the last item in an array that contains only one item, so same thing.) 
    $('.' + elemClass).addClass('hover'); 
}).mouseout(function() { 
    $(this).find('td').removeClass('hover'); 
}); 

Here's a JSFiddle demonstrating this.

Реалистично, вы также можете сделать что-то вроде следующего для каждого отдельного класса:

$('.order_1').hover(function() { 
    $('.order_1').toggleClass('hover'); 
}); 

Но я решил «автоматизировать» это.

Answer 2

Вместо этого я бы рекомендовал использовать классы, однако, чтобы ответить на ваш вопрос, вы можете достичь этого, используя n-й дочерний псевдоним css.

В качестве примера я создал быстрый JSFiddle. https://jsfiddle.net/fzjuxyeL/8/ - Обновлена ​​работа!

#order_1:nth-child(1n+1) 
// Start at 1 and increment by 1 finding all divs with ID 

$('#order_1:nth-child(1n+1)').hover(function(){ 
    $('#order_1:nth-child(1n+1)').toggleClass('toggled') 
}); 
// Applies class to all divs with specified ID when hovered