How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true?

Question

I've got a situation where a div is being hidden even though I just executed code that shows all other divs with the same suffix: $("[id$='-input-container']").show()

Regardless of this, one particular div remains hidden: $("#single-colorRange-color-input-container"). I thought maybe it was being hidden somewhere later in the code but no -- immediately after calling $inputContainers.show() I have added logging as follows (and the debugger statement stops all subsequent execution):

console.log($("#single-colorRange-color-input-container").css('display'));      
$inputContainers.show();
console.log($("#single-colorRange-color-input-container").css('display'));
console.log($("#single-colorRange-color-input-container")[0].hidden);
console.log($("#single-colorRange-color-input-container").is(':hidden'));
debugger;

First none is logged as the css/display value before .show() is called. This is expected.

Then block is logged as the css/display value after .show() is called. This is expected.

Then false is logged as the hidden attribute of the first (only) element of the result set. This is expected.

Then true is logged as the result of calling .is(':hidden'). This is unexpected.

How can .css('display') be block, [0].hidden be false, and .is(':hidden') be true? The div in actuality is/remains indeed hidden despite the call to .show(), and it would seem absurd to me to add special logic for just this one div if there is some reasonable explanation.

Answer 1

According to the jQuery documentation the hidden selector can return true for any of the following cases

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

Since hidden is a pretty simple boolean and display is block my guess would be that it is due to one of the last three, specifically the last point. Make sure all ancestors are also visible.

Answer 2

An ancestor of the element might be hidden, so that's why .is() might be returning true.