66

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.

4

4 回答 4

109

您可以使用:visible选择器仅查找可见的。

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

您可以使用.not()选择器仅查找隐藏的。

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

我认为您可以使用这一行在代码中执行相同的操作。

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

找到所有.someDiv并隐藏它们，然后找到具有.regular类的那些并显示它们。

于 2013-05-28T02:26:57.443 回答
12

您可以使用:visible选择器来选择.someDiv可见的。

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

这是另一种利用链接的有趣方式:) 并使其成为单行。

$('.someDiv:visible').not($('.someDiv.regular:visible')).hide();
于 2013-05-28T02:26:31.890 回答
2

您可以通过两种方式做到这一点：您可以为display: none元素添加另一个类并通过 css 使它们不可见，或者您可以通过 jquery 找出 css 属性

通过 CSS 类

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

通过jQuery

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});
于 2013-05-28T02:26:29.823 回答
1

您可以使用:not()选择器并在进入之前过滤结果.each()：

$(".someDiv:not(:hidden)").each(function(){
于 2013-05-28T02:25:38.540 回答