Javascript 如何在jQuery中应用CSS并在过滤后忽略隐藏的元素？

我有很多图片，我在一个交替大小的网格系统中排列。出于许多原因，图像必须以默认大小开始，我将根据其位置使用jQuery对每个图像进行更改。这是一张它应该做什么的图纸

我还使用jQuery根据类别进行过滤，并且希望图像在过滤后也能做同样的事情。但是，CSS似乎既适用于可见图像，也适用于隐藏图像。我曾尝试使用

.filter（）

始终为我提供

:visible

元素，但运气不佳

以下是HTML：

<div id='pagetop'>
      <ul>
        <li class="filter active" data-filter="all">All</li>
        <li class="filter" id='cat1' data-filter="category-1">A</li>
        <li class="filter" id='cat2' data-filter="category-2">B</li>
        <li class="filter" id='cat3' data-filter="category-3">C</li>
      </ul>
    </div>

    <div id="container" class="container">

      <!-- LR 1* -->
      <!--1-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>ONE</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- BR 1* -->
      <!--2-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>TWO</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- DR 2* -->
      <!--3-->
      <div class='mix category-1 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>THREE</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class A</p>
          </div>
        </div>
      </div>
      <!-- DR 3* -->
      <!--4-->
      <div class='mix category-1 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>FOUR</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class A</p>
          </div>
        </div>
      </div>
      <!-- LR 4* -->
      <!--5-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>FIVE</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- LR 5* -->
      <!--6-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>SIX</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- DR 6* -->
      <!--7-->
      <div class='mix category-1 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>SEVEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class A</p>
          </div>
        </div>
      </div>
      <!-- LR 8* -->
      <!--8-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>EIGHT</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- LR 9* -->
      <!--9-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>NINE</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- BR 3* -->
      <!--10-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>TEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- LR 10* -->
      <!--11-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>ELEVEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- BR 4* -->
      <!--12-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>TWELVE</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- BR 5* -->
      <!--13-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>THIRTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- BR 6* -->
      <!--14-->
      <div class='mix category-3 mixlarge '>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>FOURTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- BR 7* -->
      <!--15-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>FIFTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- BR 8* -->
      <!--16-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>SIXTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
      <!-- LR 11* -->
      <!--17-->
      <div class='mix category-2 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>SEVENTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class B</p>
          </div>
        </div>
      </div>
      <!-- BR 9* -->
      <!--18-->
      <div class='mix category-3 mixlarge'>
        <img src="https://placeholdit.imgix.net/~text?&w=668&h=337">
        <div class='longtext'>
          <p class='px32'>EIGHTEEN</p>
        </div>
        <div class='overlay'>
          <div class='text tC'>
            <p class='roomdesc'>Some Stuff Goes Here</p>
            <p class='roomtype'>Class C</p>
          </div>
        </div>
      </div>
    </div>

下面是jQuery：

   $('.filter').click(function() {
      var dataFilter = $(this).attr('data-filter')

      $('.filter').removeClass('active');
      $(this).addClass('active');

      if (dataFilter == 'all') {
        $('#container').children('div.mix').show('slow');
      } else {
        $('#container').children('div:not(.' + dataFilter + ')').hide('slow');
        $('#container').children('div.' + dataFilter).show('slow');
      }
    });


    $('#container').find('.mix:nth-child(4n+1)').each(function() {
      var smallSize = 324;
      $(this).css('width', smallSize);
      $(this).css('overflow', 'hidden');
    });

    $('#container').find('.mix:nth-child(even)').each(function() {
      var prevImg = $(this).prev().width();
      var rightSize = (984 - prevImg)

      $(this).css('width', rightSize);
      $(this).css('overflow', 'hidden');
    })

    $('#container').find('.mix:nth-child(4n+3)').each(function() {
      var largeSize = 660;
      $(this).css('width', largeSize);
      $(this).css('overflow', 'hidden');
    });

这是我到目前为止所做工作的一部分

---

所以，我有最初的CSS工作，我有过滤工作。但是，我需要一些帮助，将CSS仅应用于过滤后的场景图像。

您可以使用.filter来检查图像是否具有特定的类，而不是使用.filter

---

如果图像有特定的类，那么让它做一些事情

您正在搜索.addClass（）？

对于筛选，您应该检查JQuery中的：visible选择器 细节： 还有一个：隐藏

供参考的选择器的完整列表：

---

切换可见/隐藏元素上的类或数据属性，以便您可以检查类/数据属性，而不是检查元素属性。谢谢。我的希望是让所有内容都具有相同的类，并根据图像的位置而不是其类添加CSS。这样，任何人都可以在任何地方、任何时间添加额外的图像，而且仍然有效。

   $('.filter').click(function() {
      var dataFilter = $(this).attr('data-filter')

      $('.filter').removeClass('active');
      $(this).addClass('active');

      if (dataFilter == 'all') {
        $('#container').children('div.mix').show('slow');
      } else {
        $('#container').children('div:not(.' + dataFilter + ')').hide('slow');
        $('#container').children('div.' + dataFilter).show('slow');
      }
    });


    $('#container').find('.mix:nth-child(4n+1)').each(function() {
      var smallSize = 324;
      $(this).css('width', smallSize);
      $(this).css('overflow', 'hidden');
    });

    $('#container').find('.mix:nth-child(even)').each(function() {
      var prevImg = $(this).prev().width();
      var rightSize = (984 - prevImg)

      $(this).css('width', rightSize);
      $(this).css('overflow', 'hidden');
    })

    $('#container').find('.mix:nth-child(4n+3)').each(function() {
      var largeSize = 660;
      $(this).css('width', largeSize);
      $(this).css('overflow', 'hidden');
    });