Make jquery :hidden and :visible selectors work

[thomaslule]

Hello,

I'm probably missing something here but I can't make jQuery :hidden selector work.

Shouldn't this print true ?

var jsdom = require("jsdom");

jsdom.env({
    html: '<div style="display: none;" />',
    scripts: [ "http://code.jquery.com/jquery-2.1.3.min.js" ],
    done: function (errors, window) {
        if (errors) throw errors;
        console.log(window.$('div').is(':hidden')); // prints false
    }
});

(jsdom version is 3.1.2)

[Sebmaster]

Works with jQuery v1. Looks like we might run into some compat issues which were removed with v2.

[Sebmaster]

There we go:
jQuery 2.0 uses offsetHeight and offsetWidth to determine visibility (whereas it used multple factors in 1.0), however we don't have layouting in jsdom. This will probably not work for a looooong time (if ever); use jQuery 1.0 instead.

[thomaslule]

Thank you, it's better but I just bumped into another problem: if the tested element isn't hidden itself but is inside a hidden one, it doesn't work.

Updated code:

var jsdom = require("jsdom");

jsdom.env({
    html: '<div style="display: none;"><span /></div>',
    scripts: [ "http://code.jquery.com/jquery-1.11.2.min.js" ],
    done: function (errors, window) {
        if (errors) throw errors;
        console.log(window.$('span').is(':hidden')); // prints false
    }
});

[Sebmaster]

Yes, we won't be able so solve that without proper layouting (to properly calculate offsetWidth/offsetHeight). There might be a hack possible where you run through all parent elements and check if they have display: none set, but I doubt well add something like this in jsdom.

[thomaslule]

I'll do that check with some other way, thanks for your inputs :)

[thomaslule]

for anyone interested, this workaround looks okay with jQuery v1:

jQueryElt.is(':hidden') || jQueryElt.parents().is(':hidden');

[domenic]

Deleting +1 comments as they are not helpful; if they persist we will lock this issue.

[viddo]

For what it's worth, doing something similar to what's suggested in #135 (comment) works, e.g.:

Object.defineProperty(window.HTMLElement.prototype, 'offsetHeight', {
  configurable: true,
  get: () => 123, // i.e. return a fixed height for all HTML elements
});

Depending on your use-case it might more or less sense of course.

[jcubic]

In jQuery 3 the visible pseudo selector look like this:

jQuery.expr.pseudos.visible = function( elem ) {
     return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

so I've used this code:

window.Element.prototype.getClientRects = function() {
    var node = this;
    while(node) {
        if(node === document) {
            break;
        }
        // don't know why but style is sometimes undefined
        if (!node.style || node.style.display === 'none' || node.style.visibility === 'hidden') {
            return [];
        }
        node = node.parentNode;
    }
     var self = $(this);
    return [{width: self.width(), height: self.height()}];
};

[davidtorroija]

In jQuery 3 the visible pseudo selector look like this:

jQuery.expr.pseudos.visible = function( elem ) {
     return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length );
};

so I've used this code:

window.Element.prototype.getClientRects = function() {
    var node = this;
    while(node) {
        if(node === document) {
            break;
        }
        // don't know why but style is sometimes undefined
        if (!node.style || node.style.display === 'none' || node.style.visibility === 'hidden') {
            return [];
        }
        node = node.parentNode;
    }
     var self = $(this);
    return [{width: self.width(), height: self.height()}];
};

I received an error of maximum stack I guessed right and modified something:

I changed this part return [{width: self.width(), height: self.height()}]; to return [{width:1111, height: 1111}]; and it works, because I don't care the width and height I'm only needing to use the :visible pseudo selector.

[OmbraDiFenice]

expanding a little bit on the previous workaround I ended up with this, which seems to work also in the case of nested elements

window.Element.prototype.getClientRects = function() {
    let node = this;
    let visible = false;
    while(node) {
        if(node === document) {
            break;
        }
        // don't know why but style is sometimes undefined
        if (!node.style || node.style.display === 'none' || node.style.visibility === 'hidden') {
            return [];
        }
        visible = true;
        node = node.parentNode;
    }
    return visible ? [{width: 111, height: 111}] : [];
};

the aim is of course just to unblock :visible (and :hidden) jQuery selectors

[jcubic]

@OmbraDiFenice this function is not recursive, that visible variable is kind of useless. You will never end with the second branch of the conditional operator. Unless you call it on $(document).is(':visible'), which is kind of stupid.

[OmbraDiFenice]

you're right @jcubic, my attempt wasn't to stop the recursion but rather to try to return the empty array in cases where a parent element wasn't visible. But regardless, my visible variable is totally useless XD For some reason it was fixing my tests but I tested a bit better (with a fresh mind, it's a new day over here 😃) and of course it does nothing. I don't know why my code started working after doing that, but clearly it wasn't because of that change.

Sorry for the confusion, in my defense I put together this "visible" stuff in like 5 minutes but I should know better by now and avoid such rookie mistakes 😅