[jquery] test if display = none

This does not work, should it? Or can you stop the error if another line could do the same:

function doTheHighlightning(searchTerms) {
    // loop through input array of search terms
    myArray = searchTerms.split(" ");
    for(i=0;i<myArray.length;i++)
    {
        // works. this line works if not out commented. Will highlight all words, also in the hidden elements
        //$('tbody').highlight(myArray[i]);

        // not working when trying to skip elements with display none...
        $('tbody').css('display') != 'none').highlight(myArray[i]);
    }

    // set background to yellow for highlighted words
    $(".highlight").css({ backgroundColor: "#FFFF88" });
}

I need to filter rows in a table and color some word. The data has become way to much for the coloring if many words are chosen. So I will try to limit the coloring by only going through the none hidden elements.

This question is related to jquery

The answer is


$('tbody').find('tr:visible').hightlight(myArray[i]);

Try this instead to only select the visible elements under the tbody:

$('tbody :visible').highlight(myArray[i]);

As @Agent_9191 and @partick mentioned you should use

$('tbody :visible').highlight(myArray[i]); // works for all children of tbody that are visible

or

$('tbody:visible').highlight(myArray[i]); // works for all visible tbodys

Additionally, since you seem to be applying a class to the highlighted words, instead of using jquery to alter the background for all matched highlights, just create a css rule with the background color you need and it gets applied directly once you assign the class.

.highlight { background-color: #FFFF88; }

Use like this:

if( $('#foo').is(':visible') ) {
    // it's visible, do something
}
else {
    // it's not visible so do something else
}

Hope it helps!


You can use the following code to test if display is equivalent to none:

if ($(element).css('display') === 'none' ){
    // do the stuff
}