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.
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]);
Use like this:
if( $('#foo').is(':visible') ) {
// it's visible, do something
}
else {
// it's not visible so do something else
}
Hope it helps!
Try this instead to only select the visible elements under the tbody
:
$('tbody :visible').highlight(myArray[i]);
$('tbody').find('tr:visible').hightlight(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; }
You can use the following code to test if display
is equivalent to none
:
if ($(element).css('display') === 'none' ){
// do the stuff
}
精彩评论