Javascript （：可见）选择器在jQuery+中不工作；开玩笑

我想在我的JS项目上编写一些测试，在某处使用jQuery选择器，如下所示：

 $('textarea:visible').each((idx, el) => {
     ....
 })

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

但是它出现了一些奇怪的问题，测试没有发现任何可见的文本区域

测试文件：

test('renders correctly', () => {
  document.body.innerHTML = `
    <textarea style="width:100px;height:100px;display:block;opacity:1;visibility:visible;">
        Test
    </textarea>
  `;
  console.log($('textarea').val()); // return Test

  console.log($('body').is(':hidden')); // return true!
  console.log($('textarea').is(':visible')); // return false!
  console.log($('textarea:visible').length); // return 0!

  ....
});

test（'正确呈现'，（）=>{
document.body.innerHTML=`
试验
`;
console.log（$（'textarea'）.val（））；//返回测试
console.log（$（'body'）.is（':hidden'）；//返回true！
console.log（$（'textarea'）.is（':visible'）；//返回false！
console.log（$（'textarea:visible'）.length）；//返回0！
....
});

这是因为自定义取决于元素是否占用空间，而不仅仅是其显示值

在可见的伪选择器中，如下所示：

 $('textarea:visible').each((idx, el) => {
     ....
 })

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

所以你可以这样重写

window.Element.prototype.getClientRects = function() {
    var node = this;
    while(node) {
        if(node === document) {
            break;
        }
        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()}];
};

---

是（':visible'）

不是

是（'visible'）

。投票结束是一个打字错误。另外，您的上一个console.log返回的是

1

，而不是

0

：@Rorymcrossan我编辑了我的问题，但问题仍然发生在我身上。关于最后一个

控制台.log

，是的，我想应该是1！但是它返回0@RoryMcCrossan注意到问题只是开玩笑的！因此，您的

jsfiddle

链接毫无意义你得到了什么值？无论可见性如何，

是否被检测到？