CODEWITHSUNDEEP
javascriptjqueryhtmlcss
siky98
siky98

Reputation: 3

Run function when all div elements are set to display:none

In this code I want the paragraph text to change to murderer after all the div elements are display to none. In this problem the paragraph text changes to murderer only one of the div elements are display to none. I understand I can use the if statement and give the condition for display:none individually and then run the function but what if there are hundred div elements. This is just a fun experiment and I need an efficient way of doing this. 

<!doctype html>
<html>
<head>
    <title>Learning jQuery</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
    	#green {
    		width:200px;
    		height:200px;
    		background-color:green;
    		border-radius:50%;
    		margin-top:50px;
    	}
    	.red {
    		width:200px;
    		height:200px;
    		background-color:red;
    		margin-top:50px;
    	}
    </style>	
</head>

<body>
	<div id="green"></div>
	<div class="red"></div>
	<div class="red"></div>
	<h1 id="murder">Hello</h1>
	<script>
		$("murder").html("murderer!");
		$("div").click(function() {
			$(this).css("display", "none");
			if ($("div").css("display") == "none") {
				$("#murder").html("murderer!");	
			}
		});
	</script>
</body>
</html>

Upvotes: 0

Views: 419

Answers (5)

jolmos
jolmos

Reputation: 1575

You could also use every function: 

function isInvisible(e) {
  return e.style.display == "none";
}


$("div").click(function() {
  $(this).css("display", "none");
  if ($("div").toArray().every(isInvisible)) {
    $("#murder").html("murderer!");	
  }
});
#green {
  width:50px;
  height:50px;
  background-color:green;
  border-radius:50%;
  margin-top:10px;
}
.red {
  width:50px;
  height:50px;
  background-color:red;
  margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="green"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<h1 id="murder">Hello</h1>

Upvotes: 0

Anil Panwar
Anil Panwar

Reputation: 2622

DEMO:

        $("murder").html("murderer!");
        $("div").click(function () {
            $(this).css("display", "none").addClass("hidden");
            alert($("div.hidden").length);
            if ($("div.hidden").length == 3) {
                $("#murder").html("murderer!");
            }
        });
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
        #green {
            width: 200px;
            height: 200px;
            background-color: green;
            border-radius: 50%;
            margin-top: 50px;
        }

        .red {
            width: 200px;
            height: 200px;
            background-color: red;
            margin-top: 50px;
        }
    </style>


    <div id="green"></div>
    <div class="red"></div>
    <div class="red"></div>
    <h1 id="murder">Hello</h1>

Upvotes: 0

TarranJones
TarranJones

Reputation: 4242

This should do it. 

    $("div").click(function() {
        $(this).hide();
        if (!$('div:visible').length) {
            $("#murder").html("murderer!"); 
        }
    });

Upvotes: 0

Mike Kirchem
Mike Kirchem

Reputation: 21

Does this give you what you want? You could devise a more sophisticated/complex solution using events but that may be overkill for your requirements?


$("div").click(function() {
    $(this).hide();

    if ($("div:visible").length == 0) {
        $("#murder").html("murderer!"); 
    }
});

Upvotes: 0

Linus Thiel
Linus Thiel

Reputation: 39251

With jQuery's :visible selector:

if($("div:visible").length == 0) {
  // Do stuff
}

Upvotes: 4

Related Questions