Question

Since I’ve been experimenting with jQuery for just a few days now, a few things (like arrays) are still breaking my brain. Unraveling a indexOf function, for example, feels like trying to turn right while backing out a driveway, in England. Regardless, I took a stab at applying a class based on a comparison of one div to the index of another…and (of course) I can’t get it to work. Hopefully, you can tell me if I’m “warm” with the following script. Or, if not, how to fix it.

In short: The basic idea is that if you hover over any .elbox div, the script compares the text in the .skemps div of that elbox to the content in each .pjemp div; and, if it finds a match, applies a class to the matching .pjemp div.

Div1: #ptosEmps li div

<div id="ptosEmps"> 
 <div class="menu">
  <ul id="menu"> 
    <li><div class="pjemp"><a>T</a></div></li>
    <li><div class="pjdesc">T Description</div></li>
    <li><div class="pjemp"><a>I</a></div></li>
    <li><div class="pjdesc">I Description</div></li>
    <!-- ... (one primary li and description li for each of the .skemps letters -->
  </ul>
 </div>
</div>

Div2: #ptosTable .elbox .skemps

<div id="ptosTable">
 <div class="elbox">
  content
  <div class="skemps">T,I,H,P,W,L,N,F</div>
 </div>
 <!-- About 100 of these. .skemps div can contain one or more of those letters. -->
</div>

Script (doesn’t work):

$('#ptosEmps li').filter(":even").hover(function() {
    $(this).filter(function() {
    return $('#ptosTable .skemps').text().indexOf($('.pjemp').text()) == -1;
        //if skemps = any text in menu div, return true?
    }).addClass('.emp_hi');
},
function() {
    $(this).removeClass('.emp_hi');
});

I think maybe I need to somehow define the entire filter function as a $(this), then say something like “$(this).addclass(‘.emp_hi’);” But how?

———-

For the record, I forgot to mention that the text in Div2 (which triggers addClass in Div1) was also hidden via css. So, working from BumbleB2na’s suggestion, this is what I ended up with (WORKS!):

$('.elbox').hover(function() {
    var arrSkemp = $(this).children('.skemps').text().split(',');
    $.each(arrSkemp, function(index, value) {
        $('.pjemp:contains(' + value + ')').addClass('emp_hi');
    });
},
function() {

    $('.pjemp').removeClass('emp_hi');
});

Props to BumbleB2na—both for helping me to work out the kinks in my question and for a speedy, very functional response that did not break my brain!

Answer 1

K try my jsfiddle out and maybe it will help. I couldn’t get indexOf() to work but here’s the code I would go with:

$('.skemps').hover(function() {
    var arrSkemp = $(this).text().split(',');
    $.each(arrSkemp, function(index, value) { 
        $('.pjemp:contains(' + value + ')').addClass('emp_hi');
    });
},
function() {
    var arrSkemp = $(this).text().split(',');
        $.each(arrSkemp, function(index, value) { 
            $('.pjemp:contains(' + value + ')').removeClass('emp_hi');
    });
});