Is it correct to use $(selector). not(':Visible') here?

Question

I am refactoring the CSS of a system function and to treat the CSS property and not a string I switched this line of code: (1st way was working properly)

var ultimaMensagem = $("#box-confirm:not([style*='display: none;']),#box-erro:not([style*='display: none;'])").last();

for this:

var ultimaMensagem = $('#box-confirm:not(:visible),#box-erro:not(:visible)').last();

And so the code pad went like this:

GerenciadorModais.prototype.FecharModal = function () {        
        var ultimaModal = $(".modalJanela").last(); //Pegar a ultima Modal que será fechada

        //var ultimoBlock = $(".modal:not([style='display: none;'])").last(); //Maneira antiga
        var ultimoBlock = $(".modal:not(:visible)").last(); //Pegar a ultima div que será somente escondida

        //var ultimaMensagem = $("#box-confirm:not([style*='display: none;']),#box-erro:not([style*='display: none;'])").last(); //Maneira antiga
        var ultimaMensagem = $('#box-confirm:not(:visible),#box-erro:not(:visible)').last(); //Pegar a ultima div de mensagem que será somente escondida

        if (ultimoBlock.length > 0) { // Deixar invisivel essa div
            ultimoBlock.css('display', 'none'); 
        } else 
            if (ultimaMensagem.length > 0) { // Deixar invisivel essa div
                ultimaMensagem.css('display', 'none'); 
            } else { // fechar essa modal
                ultimaModal.remove(); 
                $(".block").last().remove();
                this.nivelModal--;
            }

        if (!$(".modalJanela").length > 0) //Fechar a layer escura
            $('#btn-center-dialog').fadeOut();
    };

URL OF THE IMAGE ABOVE

I took into consideration what is written in this post: https://stackoverflow.com/questions/17425543/difference-between-hidden-and-notvisible-in-jquery

But I’m not sure it won’t bring future problems. Basically I need to get all the #box-confirm and #box-error that are invisible somehow on the screen.

So my doubts are:

1) Why does this change not work? Note: I am doing some tests and noticed that what is not working is the last else that really closes a modal, but this is probably happening because it is trying to close one of the Divs and not the modal.

2) Is there any possibility that he won’t pick the last selector that’s invisible on the screen?

3) Is there any better way to do it or is this already the best solution?

Answer 1

In fact, :not([style*='display: none;']) should be translated to :visible, and not to :not(:visible).

After all, an element that nay has display: none; is visible.

Answer 2

In case the correct would not be #box-confirm:not(:visible), but yes #box-confirm:visible for :not() with style*='display: none;' looks for visible elements as told by @falsarella.

:Visible vs attribute selector

Assuming that using the original and its html were:

<div style="display:none !important;">

In some browsers (if not all) the selector would not find it.

Really the best is to use the :visible because he checks so much:

1. DOM.style.display !== "none"

2. DOM.style.visibility === "visible"

3. <input type="hidden">

Selector by class and performance

Another one you can use (which can be in micro-optimization faster) would be a class:

.hide { display:none; }

In this way:

var ultimaMensagem = $('#box-confirm.hide,#box-erro.hide').last();

It is faster theoretically due to just doing a check, while in the :visible, it can do more than one (depending on the situation).

Note also that :visible is a jQuery and non-standard selector, so in this case jquery will not use the querySelector (which is faster because it is native). The selectors per class are native.

Note: jQuery uses the querySelector (or querySelectorAll) when there is support for function and selector, making queries faster.