Question

I’m trying to test for empty on jQuery’s e.classList (talking about the DOM map value passed by jQuery to the event if you pass the parameter for it).

So, I’m doing an absurd JS check for empty because I want to exit the function for instances where e.classList.length is anything less than than the integer 1.

Oddly, I’ve already tried

if ( ( typeof newTargetClasses !== "undefined" && newTargetClasses !== null ) && newTargetClasses.length > 0 ) {

But it returns true even when there are no items in e.classList :/

$( window ).on( 'mouseenter', '.my-class', function( e ) {

    var newTargetClasses = e.toElement.classList;

    if ( ! isNaN( newTargetClasses.length ) && newTargetClasses.length > 0 ) {
        $.each( newTargetClasses, function() {
            if ( ! thePopover.has( '.' + this ).length > 0 ) {
                el.my_jquery_func('hide');
                return false;
            }
        })
    }
}

What am I missing that these booleans? newTargetClasses.length during condition I’m trying to check for is returning a val of 0 and type of number

Answer 1

classList isn’t a jQuery thing, it’s a DOM API thing. This also wouldn’t work entirely cross-browser since according to MDN, IE9 doesn’t support it.

MDN ClassList

As for your code, you should be able to simplify that if condition to

// classList will always be falsy in IE9 so this will never run
if (e.toElement.classList && e.toElement.classList.length ) {}.

If you want it to be cross-browser, then you could try something like

if ( $.trim(e.toElement.className) ) { ... }