如何从jQuery函数中排除一个元素？

Question

when a table is being hovered, I have a function that adds a certain class to some element.

In that table, I want this behavior for all elements except one.

therefore in the code, I included th,td,td span,td p,td div.good ,

But - I have a specific span ( <span class="foo"> ) inside the table which I want to exclude, how can I do it?

(I'm not a JS coder so after looking in previous q's, still not sure about the most recommended way to do this in my context)

Code:

<script>
$(document).ready(function(){
$(function(){
    $('th,td,td span,td p,td div.good').mouseenter(function(){
        $(".light").addClass('altbg')
    }).mouseout(function(){
        $(".light").removeClass('altbg')
    });
});
})
</script>

Answer 1

Although it's possible to use .not() to exclude a set of elements from an existing selector, arguably your code is inefficient because it registers the two event handlers against a large set of elements and the callbacks will be invoked repeatedly as you move your mouse around the table.

Consider this, instead:

$('table,.foo').on('mouseenter mouseleave', function (e) {
    $('.light').toggleClass('altbg');
});

There are only two elements listening for the mouse events - the table itself, and the span you wish to ignore. Since you cannot reach the inner span without crossing the table this will produce the desired effect.

See http://jsfiddle.net/alnitak/eecqkx6v/

Answer 2

Use the jquery .not method to exclude elements

$('th,td,td span,td p,td div.good').not(".foo")

jQuery .not documentation

Also you do not have to use both the .ready method along with the passing a function to $() they will do the same thing.

$(function(){
    $('th,td,td span,td p,td div.good').not(".foo").mouseenter(function(){
        $(".light").addClass('altbg')
    }).mouseout(function(){
        $(".light").removeClass('altbg')
    });
});

is all you need