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

Question

So I start with items 1-4:

Lorem


        
                      

              相关标签:
       
      

Answer 1

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

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

Answer 2

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.

Answer 3

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();

Answer 4

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();
  }
});