Using jQuery, how do you find only visible elements and leave hidden elements alone?

JavascriptJqueryToggleShow Hide

Javascript Problem Overview


So I start with items 1-4:

<div class="someDiv bold italic" style="display: none;">Lorem</div>
<div class="someDiv regular italic" style="display: block;">Lorem</div>
<div class="someDiv bold" style="display: none;">Ipsum</div>
<div class="someDiv regular" style="display: block;">Ipsum</div>

Then I have some input checkboxes:

<input class="regular" type="checkbox" />
<input class="bold" type="checkbox" />
<input class="italic" type="checkbox" />

So basically I have jQuery showing and hiding divs. Now I have another function that must iterate through these divs (one for each checkbox), and show/hide based on another criteria. But I don't want the already hidden divs to be shown again.

$(".someDiv").each(function(){
  if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  };

In this example, the only remaining div should be the last div. Unfortunately, this code will make the second and fourth divs shown.

This code is very basic example of all the filters I'm going to be applying, adding etc.

Javascript Solutions


Solution 1 - Javascript

You can use the :visible selector to find only visible.

$(".someDiv:visible").each(....);

You can use the .not() selector to find only hidden.

$(".someDiv").not(":visible").each(....);

I think you can perform the same operation in your code with this one line.

$(".someDiv").hide().find(".regular").show();

Find all .someDiv and hide them, then find those with a .regular class and show them.

Solution 2 - Javascript

You could use :visible selector to select the .someDiv that are visible.

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});

Here is another funny way utilizing the chaining :) and making it single line.

$('.someDiv:visible').not($('.someDiv.regular:visible')).hide();

Solution 3 - Javascript

You could do this two ways: You could add another class for the display: none elements and make them invisible via css, or you could find out the css property via jquery

##via css class##

###html###

<div class="someDiv bold italic hidden" >Lorem</div>
<div class="someDiv regular italic" >Lorem</div>
<div class="someDiv bold hidden" >Ipsum</div>
<div class="someDiv regular" >Ipsum</div>

###css###

.someDiv{
    display: block;
}

.hidden{
    display: none;
}

###js###

$(".someDiv").each(function(){
  if($(this).hasClass("hidden")){
    $(this).show();
  } else {
    $(this).hide();
  };

##via jquery##

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});

Solution 4 - Javascript

You can use the :not() selector for that and filter the results before going into the .each():

$(".someDiv:not(:hidden)").each(function(){

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questiono_OView Question on Stackoverflow
Solution 1 - JavascriptReactgularView Answer on Stackoverflow
Solution 2 - JavascriptPSLView Answer on Stackoverflow
Solution 3 - JavascriptNicheView Answer on Stackoverflow
Solution 4 - JavascriptJa͢ckView Answer on Stackoverflow