当innerHTML为null时隐藏div

Question

I am pretty new to jQuery but I am trying to get a code setup which hides a div when the 'innerHTML' is null. I tried using the code below. But it doesn't work! Where is my fault??

if (($("#php-errors").html).length) {
    $("#php-errors").css("display", "block");
}
else {
    $("#php-errors").css("display", "none");
}

Answer 1

if ($("#php-errors").html().length) {
    $("#php-errors").css("display", "block");
}
else {
    $("#php-errors").css("display", "none");
}

Correction:

($("#php-errors").html).length should be $("#php-errors").html().length

Answer 2

One line, and using .show() and .hide() methods:

var hasCont = $("#php-errors").contents().length ? $("#php-errors").show() : $("#php-errors").hide();

Using the ternary operator that says:

• (define var) statement ?
• action if statement is true :
• action if statement is false ;

DEMO JSFIDDLE

---

A good practice would be to cache your element inside a var, let's call it var $el , and use it like:

 var $el = $("#php-errors"); var hasCont = $el.contents().length ? $el.show() : $el.hide(); 

Much more readable, and it will save you some micro processing time ;) but it really helps in terms of cross-function reusability (if defined outside the function.)

Answer 3

You can clean your code a little like this.

It also uses the innerHTML property as the condition part of the ternary expression. If there's any content, it'll return and set "block", if not, then "none".

$("#php-errors").css("display", function() {
    return this.innerHTML ? "block" : "none";
});

http://jsfiddle.net/WKWNc/2/

---

update:

If this only runs when the page loads, you could initially have it set to "block", and then do this.

$("#php-errors:empty").hide();

http://jsfiddle.net/WKWNc/1/

Or the opposite, have it set to "none", and show it if not empty.

$("#php-errors:not(:empty)").show();

http://jsfiddle.net/WKWNc/

Answer 4

Just to add the css way that will not require javascript in case someone else needs it:

.php-errors:empty { display: none; }

Will Match:

<div class="php-errors"></div>
<div class="php-errors"><!-- test --></div>

Will Not Match:

<div class="php-errors"> </div>
<div class="php-errors">
   <!-- test -->
</div>

<div class="php-errors">
</div>

Source: https://css-tricks.com/almanac/selectors/e/empty/

Answer 5

For your case, it seems you just want:

$("#php-errors").toggle();

I can see no case where you want to set the display to either block or none if none is already set.

Are you sure your logic isn't redundant?

Answer 6

I think u missed compare , try this

if ($("#php-errors").html() == "") {
    $("#php-errors").css("display", "block");
}
else {
    $("#php-errors").css("display", "none");
}

Answer 7

I would do something like this:

var $php_errors = $("#php-errors");

if ($php_errors.is(":empty")) {
    $php_errors.hide()
}
else {
    $php_errors.show();
}

hope it helps