如何干净地定义 $().on() 选择器

Question

I am working with an existing jQuery (version 3.2.1) function:

$('#example').on('click', 'tbody td:not(:first-child)', 
   function (e) {
      // do stuff
  });

In this case, function(e) will only act if the TD is not the first column in the row.

If I need to add some more not conditions (in what happens to be a table with at least 5 such columns), the function becomes something a little uglier.

In testing it out, I know it works, but there's got to be a better way to do this.

$('#example').on('click', 'tbody td:not(:first-child):not(:nth-
    child(2)):not(:nth-child(3))',  
function (e) {
   // do stuff
});

Is there a cleaner technique to indicate a set of not conditions in the selector? I was thinking that I could replace the selector string with a function, but I have not seen examples of that in use, even on the jQuery website .

Answer 1

Are you looking for something like this ?

$("#example")
  .not(":first-child")
  .not(":nth-child(2)")
  .not(":nth-child(3)")
  .on('click', 
    function (e) {
     // do stuff
   });

Disclaimer: I didn't check if this really works.

Answer 2

@lilezek's answer is a good one. If you're looking to shorten your target to single lines, you can define the strings in a variable elsewhere, then pass the variable as the selector to your event handler.

var selector_foo = 'tbody td:not(:first-child):not(:nth-
child(2)):not(:nth-child(3))'
...
$('#example').on('click', selector_foo, 
    function (e) {
        // do stuff
});

Answer 3

Using a class would be a much simpler solution. Just add the class you want to use to the cells you want to exclude and select as you normally would.

tbody td:not(.exclude)