test if display = none

Question

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.

Answer 1

If you want to get the visible tbody elements, you could do this:

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

It looks similar to the answer that Agent_9191 gave, but this one removes the space from the selector, which makes it selects the visible tbody elements instead of the visible descendants.

---

EDIT:

If you specifically wanted to use a test on the display CSS property of the tbody elements, you could do this:

$('tbody').filter(function() {
     return $(this).css('display') != 'none';
}).highlight(myArray[i]);

Answer 2

Use like this:

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

Hope it helps!

Answer 3

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

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