Question

I’m trying to combine the td:not(:first-child) and td:empty selectors in my jQuery code. I have attached a code excerpt below. This code makes use of a hoverIntent plugin to execute the function code after a time delay of 1 second.

$(".jqgrow td:not(:first-child)")
    .mouseenter(function(){
    $.doTimeout('cellhover', 1000, function(e){
        my_tooltip
        .css({opacity:0.85, display:"none"})
        .stop() // Added stop() to fix bug, flickering of tooltip
        .fadeIn(10);                                
    });
});

In simple terms, I need the function to trigger if the mouse is not over the first column in my table (this table contains cells whose contents is irrelevant to my tooltip) and the cell the mouse is over is not empty. I’m not sure whether to use td:empty or use use .html().

I have tried the following which have not worked:

$(".jqgrow td:not(:first-child) td:empty")
$(".jqgrow td:empty td:not(:first-child)")
$(".jqgrow td:not(:first-child, :empty)")

I see ideas for using .is(:empty) and filter() relating to other questions but I don’t see how I can apply that to this situation.

I would be appreciative of any assistance!

Answer 1

td:empty selects cells that are empty, which is contrary to the description in your question, which states you want it to apply only on cells that are not empty.

From your description, it looks like your last selector should work:

// Select td elements in .jqgrow that are neither :first-child nor :empty
$(".jqgrow td:not(:first-child, :empty)")

If it doesn’t, something else is wrong.