re-fading in table after fading all other out

Question

Hey all i have this code here that fades all the tables on the page and then, if the search term was found, highlights that word. However, i can not seem to get it to re-fadein that row(s) where the search term was found.

function searchAndHighlight(searchTerm, selector) {
    if(searchTerm) {
        var selector = selector || "body";
        var searchTermRegEx = new RegExp(searchTerm, 'ig');
        var matches = $(selector).text().match(searchTermRegEx);

        if(matches) {
            $('.highlightedSearched').removeClass('highlightedSearched');
            $(selector).html($(selector).html().replace(searchTermRegEx, "<span class='highlightedSearched'>"+searchTerm+"</span>"));

            if($('.highlightedSearched:first').length) {
                $(".table").each(function( index ) {
                    $(this).fadeTo( "slow" , 0.2, function() {
                        $(".highlightedSearched").each(function( index ) {
                            $(this).fadeTo( "slow" , 1, function() {
                                $('html, body').animate({scrollTop:$('.highlightedSearched:first').position().top - 130}, 'slow');
                            });
                        });
                    });
                });
            }

            return true;
        }
    }
    return false;
}

<div class="table" style="opacity: 0.2;">
  <div class="row" onclick="changeChannel(3);" data-searched="name">
    <span class="cell">
      <img class="stationImg" src="images/logo1.jpg"><br>
      <div align="center" class="Channel">Channel 3<br>name</div>
    </span>
    <span class="cell_2hr">
      <span class="timeForShow">1:00p-3:00p<br></span>
      <span class="tvShowTitle">Golf: <span class="highlightedSearched" style="opacity: 1;">The</span> Challenge<br></span>
      <span class="tvEpisodeTitle">&nbsp;</span>
    </span>
    <span class="cell_30min">
      <span class="timeForShow">3:00p-3:30p<br></span>
      <span class="tvShowTitle">News<br></span>
      <span class="tvEpisodeTitle">&nbsp;</span>
    </span>
  </div>
</div>

It does work since it tell it to fadeTo 1 this:

<span class="highlightedSearched" style="opacity: 1;">The</span> Challenge<br></span>

But i need it to look for the table class that the highlightedSearched is within.

Any help would be great!

Answer 1

If you inspect the elements after calling the function you'll see that the opacity is correctly set on the inner input span (as I think you acknowledge). The problem is with how opacity works, basically you've faded the entire DIV including all the children, and that is overriding your attempt to change the child.

The way round that is to first give the inner spans an extra class (say dimmable) now when you do the search replace you want to close that span and open a new one:

$(selector).html($(selector).html().replace(searchTermRegEx, 
    "</span><span class='highlightedSearched dimmable'>"+
    searchTerm+
    "</span><span class='dimmable'>"
));

Note the searchTerm class is still dimmable since you want it to fade out then in. Then do something like this:

 $(".dimmable").each(function( index ) {
     $(this).fadeTo( "slow" , 0.4, function() {
         $(".highlightedSearched").each(function( index ) {
             $(this).fadeTo("slow", 1);
         });
     });
 });

Example here.

It's a bit of a hack, you might want to re-think the structure to make it a bit easier or alternatively choose a different highlighting method (yellow background is pretty universally understood).

You might also want to change the search system to ensure that nothing odd can be matched, currently the whitespace between elements is matchable (which produces odd results).

EDIT: Also see this answer: CSS opacity and child elements