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.
You can simply use the jQuery :visible or :hidden selector to select all the visible or hidden elements in an HTML page. The jQuery :visible selector considered an element visible if they consume space in the document.
jQuery | Effect show() Method. The show() Method in jQuery is used to display the hidden and selected elements. Note: This method display the hidden elements which are using CSS display: none property.
jQuery hide() Method The hide() method hides the selected elements. Tip: This is similar to the CSS property display:none.
jQuery toggle() You can also toggle between hiding and showing an element with the toggle() method.
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.
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();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With