Same class within the same element

Issue

So I'm making a tool to help students learn foreign language. It's basically two columns of text, first in the targeted language, and the other in English. The one I'm currently making is for Greek.

What my goal is that when a word in the first is hovered over it's highlighted and the corresponding word in English in the second column is also highlighted.

The numbers have to be also explicitly named because the Greek and English word order is not the same, and I figured I can do it with classes.

<table>
    <tr>
        <td class=greek>
            <span class="adv one">Πολλάκις</span> 
            <span class="adj one">βραχεῖα</span> 
            <span class="noun one">ἡδονὴ</span> 
            <span class="adj two">μακρὰν</span> 
            <span class="verb one">τίκτει</span> 
            <span class="noun two">λύπην</span>.
        </td>
        <td class=eng>
            <span class="adj one">Short</span> 
            <span class="noun one">pleasure</span> 
            <span class="adv one">often</span> 
            <span class="verb one">begets</span> 
            <span class="adj two">long</span> 
            <span class="noun two">pain</span>.
        </td>
    </tr>
</table>

But I have really basic knowledge of JQuery so I don't know how to move to selecting the same word in both columns with the same number.

$(".greek > .noun").hover(
        function() {
            $(".greek > .noun, .eng > .noun").css({'color': 'white', 'background-color': 'rgb(79,129,189)'});
        }, function() {
            $(".greek > .noun, .eng > .noun").css({'color': 'black', 'background-color': 'rgb(255,255,255)'});
        }
    );

I also want to make it work in reverse, that is when I hover over a word in the English column, the corresponding word in the Greek columns gets highlighted as well.

Solution

If you want to highlight exact same classes from one column and in the second then you can use this code:

function clear() {
  $('.greek > span, .eng > span').css({ color: '' });
}

$('.greek > span').hover(function() {
   var self = $(this);
   var cls = self.attr('class');
   clear();
   // create CSS selector out of class property
   // so "adv one" become ".adv.one"
   var selector = cls.split(/\s+/).map(cls => '.' + cls).join('');
   self.closest('tr').find(selector).css({ color: 'red' });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td class=greek>
            <span class="adv one">Πολλάκις</span> 
            <span class="adj one">βραχεῖα</span> 
            <span class="noun one">ἡδονὴ</span> 
            <span class="adj two">μακρὰν</span> 
            <span class="verb one">τίκτει</span> 
            <span class="noun two">λύπην</span>.
        </td>
        <td class=eng>
            <span class="adj one">Short</span> 
            <span class="noun one">pleasure</span> 
            <span class="adv one">often</span> 
            <span class="verb one">begets</span> 
            <span class="adj two">long</span> 
            <span class="noun two">pain</span>.
        </td>
    </tr>
    <tr>
        <td class=greek>
            <span class="adv one">Πολλάκις</span> 
            <span class="adj one">βραχεῖα</span> 
            <span class="noun one">ἡδονὴ</span> 
            <span class="adj two">μακρὰν</span> 
            <span class="verb one">τίκτει</span> 
            <span class="noun two">λύπην</span>.
        </td>
        <td class=eng>
            <span class="adj one">Short</span> 
            <span class="noun one">pleasure</span> 
            <span class="adv one">often</span> 
            <span class="verb one">begets</span> 
            <span class="adj two">long</span> 
            <span class="noun two">pain</span>.
        </td>
    </tr>
</table>

And you one to highlight when hovering over both languages just add update first main selector to $('.greek > span, .eng > span')

NOTE: I also have one suggestion don't use css() to style the element you single class like 'selected' and use CSS to style that class, this way you avoid inline styles and you can easily change the style without the need to modify the JavaScript code.

function clear() {
  $('.greek > span, .eng > span').removeClass('selected');
}

$('.greek > span').hover(function() {
   var self = $(this);
   var cls = self.attr('class');
   clear();
   // create CSS selector out of class property
   // so "adv one" become ".adv.one"
   var selector = cls.split(/\s+/).map(cls => '.' + cls).join('');
   self.closest('tr').find(selector).addClass('selected');
});

.selected {
  color: red;
  background: black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
        <td class=greek>
            <span class="adv one">Πολλάκις</span> 
            <span class="adj one">βραχεῖα</span> 
            <span class="noun one">ἡδονὴ</span> 
            <span class="adj two">μακρὰν</span> 
            <span class="verb one">τίκτει</span> 
            <span class="noun two">λύπην</span>.
        </td>
        <td class=eng>
            <span class="adj one">Short</span> 
            <span class="noun one">pleasure</span> 
            <span class="adv one">often</span> 
            <span class="verb one">begets</span> 
            <span class="adj two">long</span> 
            <span class="noun two">pain</span>.
        </td>
    </tr>
    <tr>
        <td class=greek>
            <span class="adv one">Πολλάκις</span> 
            <span class="adj one">βραχεῖα</span> 
            <span class="noun one">ἡδονὴ</span> 
            <span class="adj two">μακρὰν</span> 
            <span class="verb one">τίκτει</span> 
            <span class="noun two">λύπην</span>.
        </td>
        <td class=eng>
            <span class="adj one">Short</span> 
            <span class="noun one">pleasure</span> 
            <span class="adv one">often</span> 
            <span class="verb one">begets</span> 
            <span class="adj two">long</span> 
            <span class="noun two">pain</span>.
        </td>
    </tr>
</table>

Answered By - jcubic