test if display = none

Question

Hi

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 colloring if many words are choosen. So I will try to limit the colloring by only going through the none hidden elements.

Hope it make sense :-)

BR. Anders

Answer 1

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

Answer 2

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

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

Answer 3

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 4

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 5

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; }