CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Lan Mai
Lan Mai

Reputation: 375

jQuery get all items that is visible?

I have this example:

HTML

<div id="Contents">
  <div id="Showing"></div>
  <div id="Hiding"></div>
</div>

CSS

#Hiding{
  display : none
}

Is there a way in jQuery that we can get all items in the DOM that is visible (display != none)? In this case, we get 2 divs that has id of 'Contents' and 'Showing'. Thank you very much.

Upvotes: 0

Views: 144

Answers (2)

Avinash Raut
Avinash Raut

Reputation: 2113

try this , here you will get only visible means display!=none items from Contents container.

HTML

<div id="Contents">
  <div id="Showing"></div>
  <div id="Hiding"></div>
</div>

Javascript:

<script>
$("#Contents").each(function(){
  if($(this).hasClass("visible")){
    $(this).show();
  } else {
    $(this).hide();
  };
</script>

if you can try to get all hidden items of Contents using same code with hidden attributes.

<script>
    $("#Contents").each(function(){
      if($(this).hasClass("hidden")){
        $(this).show();
      } else {
        $(this).hide();
      };
    </script>

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53684

You can use jQuery's :visible selector

$('*:visible').addClass('visible');
#Hiding {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Contents">
  <div id="Showing">showing</div>
  <div id="Hiding">hiding</div>
</div>

Upvotes: 3

Related Questions