Javascript : Give . Hide on everything that is open

Asked

Viewed 425 times

4

Good afternoon. I would like to know how to do instead of writing:

  $("#removemirror3").click(function(){
  $("#mirror31").hide("slow");
  $("#mirror32").hide("slow");
  $("#mirror33").hide("slow");
  $("#add4mirror").hide("slow");

Write a general ID that hides everything that is open. Hugs.

jquery
  • 1

    You can do everything in one line: $("#mirror31, #mirror32, #mirror33, #add4mirror").hide("slow");

  • And there’s no way I won’t have to write them all?

  • 2

    Adding classes to the elements is one of the most common uses. You can also leave a container out of the elements and hide only the cantainer. There are several ways to do this, depends on creativity...

  • Renan and how do I hide the whole sequence? give an Hide in foo[]?

3 answers

5

You can use a context to select the elements and give a . Hide()

Example:

  • Use one selection per class in common.
  • Search for specific attribute.
  • Use parent element and use . find by widgets.

Create a context to improve your selection of elements, so handling will be easier.

5


@William, for this you need a common element among all mirror. For example look at the HTML below:

HTML

<div id="mirror30" data-mirror class="hidden" ></div>
<div id="mirror31" data-mirror ></div>
<div id="mirror32" data-mirror ></div>
<div id="mirror33" data-mirror ></div>
<div id="mirror34" data-mirror class="hidden" ></div>
<div id="add4mirror" data-mirror ></div>

CSS

.hidden { display: none; }

In the above case, all the mirror has the data-mirror property, so you can use it to select to all of them.

Since you only need visible ones, you can apply a filter :visible

$("[data-mirror]:visible").hide("slow");


var btHidden = $("#btHidden");
btHidden.click(function () {
  var visibleMirror = $("[data-mirror]:visible");
  visibleMirror.hide("slow");
});
.hidden { display: none; }

.container {
  height: 120px;
}

.mirror {
  float: left;
  background-color: whitesmoke;
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 10px black;
  margin: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div id="mirror30" data-mirror class="mirror hidden" ></div>
  <div id="mirror31" data-mirror class="mirror" ></div>
  <div id="mirror32" data-mirror class="mirror" ></div>
  <div id="mirror33" data-mirror class="mirror" ></div>
  <div id="mirror34" data-mirror class="mirror hidden" ></div>
  <div id="add4mirror" data-mirror class="mirror" ></div>
</div>
<button id="btHidden" >Esconder Tudo</button>

3

It is possible to select elements containing part of the id. It is worth noting that there are other easier ways to do this manipulation, as mentioned in the other questions, see an example:

 $("button").click(function(){
     // seleciona todos os elementos que contenham mirror no id
     //$("[id*=mirror]").hide("slow"); 
     
     // seleciona todos os elementos que contenham mirror3 no id
     //$("[id*=mirror3]").hide("slow"); 
   
     // seleciona todos os elementos que contenham mirror3 no id, exceto botão
     $("[id*=mirror3]:not(button)").hide("slow"); 
   
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mirror31">#mirror31</div>
<div id="mirror32">#mirror32</div>
<div id="mirror33">#mirror33</div>
<div id="add4mirror">add4mirror</div>
<button type="button" id="removemirror3">Remove</button>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.