内部div为空时如何隐藏div？

Question

Please check my jsfiddle to check the whole code. I am trying to hide the whole contentMachine div if the div class timeimg is empty or no ledBar with status-1 or status-2 classes are present.

I have the ff code right now:

$(function() {
    function showHideEmptyBlocks() {
        $(".contentMachine").each(function() {
            // var isVisible=$(this).find(".timeimg").text() && $(this).find(".timeimg").text().length;
            var display=$(this).find(".ledBar").is('.status-1, .status-2');
            //console.log('display >' , display);
            if(display) {
                $(this).show();
            } else {
                $(this).hide();
            }
        })

        setTimeout(function(){
            showHideEmptyBlocks();
        },1);
    }
    showHideEmptyBlocks();
})

It is now hiding if there is no status-2 or status-1 class inside the ledbar class... I just wanna add a logic that hides it as well when span class timeimg is EMPTY

Answer 1

find returns an jQuery Object .

change -

if (display) {...}

to

if (display.length > 0) {...}

See - https://jsfiddle.net/hexa5072/1/

Working Fiddle - https://jsfiddle.net/pLkqh0d7/

Answer 2

To determine if a span has no text inside, use

.text() === ""

or

.text() !== ""

depending on whether you want to know if it's empty ( ==="" ) or not empty ( !=="" ).

Updated code:

var display = $(this).find(".ledBar").is('.status-1, .status-2')
                || $(this).find(".timeimg").text() !== "";
$(this).toggle(display);

The above says: "show if there is a .status-1/2 or the text is not empty". Conversely, this is the same as "hide if it's not .status-1/2 and the text is empty".

If this doesn't match your exact requirement, you can change || with && and === with !== to get the exact logic you need. As it's not clear if "as well" means either or if it must be both.

Your logic is the opposite of your wording (show if not this, vs hide if this). It can be easier to make the logic match what your wording, eg:

var hide = !$(this).find(".ledBar").is('.status-1, .status-2')
                && $(this).find(".timeimg").text() === "";
$(this).toggle(!hide);

which says: "hide if it's not status1/2 and the text is empty"

var hide = !$(this).find(".ledBar").is('.status-1, .status-2')
                || $(this).find(".timeimg").text() === "";
$(this).toggle(!hide);

which says: "hide if it's not status1/2 or the text is empty"