我有一堆DIV,它们是一个投资组合中的提要,该投资组合有一个显示和隐藏DIV的过滤系统-这很好用-我正在调整这个系统来查看与点击的过滤器匹配的DIV,然后用jQuery用一个新的类对它们进行样式化。CSS nth-of-type
不起作用,因为它识别隐藏的DIV,从而弄乱了我的自定义布局,所以我需要一种可靠的方法来检查DIV列表,并将新类仅应用于那些没有应用内联样式"transform: scale(0.001)"
的DIV-这种内联样式由过滤系统应用,我不想搞砸-所以我正在寻找一种方法,在DIVS中添加一个新的类,而不是在每次单击过滤器按钮时应用"transform: scale(0.001)"
。
我想添加的类是“itemPOS 1”到第一个没有应用转换的div,然后“itemPOS 2”到第二个,等等......所以下面的DIVS列表在初始加载时看起来像这样:
<div>Project 1</div>
<div>Project 2</div>
<div>Project 3</div>
<div>Project 4</div>
<div>Project 5</div>
字符串
然后点击过滤器后,列表可能看起来像这样:
<div>Project 1</div>
<div style="transform: scale(0.001)">Project 2</div>
<div style="transform: scale(0.001)">Project 3</div>
<div>Project 4</div>
<div style="transform: scale(0.001)">Project 5</div>
型
在这种情况下,当我将新类添加到合适的DIVS中时,列表将如下所示:
<div class="itemPOS1">Project 1</div>
<div style="transform: scale(0.001)">Project 2</div>
<div style="transform: scale(0.001)">Project 3</div>
<div class="itemPOS2">Project 4</div>
<div style="transform: scale(0.001)">Project 5</div>
型
因此,在前端-用户只会看到“项目1”和“项目4”。
我似乎不能得到这个工作很好-我正在使用:
$('div:visible:eq(0)').addClass('itemPOS1');
$('div:visible:eq(1)').addClass('itemPOS2');
$('div:visible:eq(2)').addClass('itemPOS3');
$('div:visible:eq(3)').addClass('itemPOS4');
型
但它并不可靠,因为有时它会将类应用于应用了transform:scale(0.001)的div,从而使项目的渲染错误,因为类名被错误地添加。我希望找到一种方法,只将添加类逻辑应用于那些没有应用“transform:scale(0.001)”的div。
我还想将itemPOS 1、2、3、4和5添加到没有应用内联转换的每5个DIV中-例如,应该应用类的第6个DIV应该得到itemPOS 1而不是itemPOS 6
有什么想法吗?
在本质上寻找:
如果div没有transform:scale(0.001),则添加类itemPOSX
X从第一格的1开始,然后是第二格的2.直到第五格,然后第六格有itemPOS 1,第七格有itemPO 2,等等。
$('div:visible:eq(0)').addClass('itemPOS1');
$('div:visible:eq(1)').addClass('itemPOS2');
$('div:visible:eq(2)').addClass('itemPOS3');
$('div:visible:eq(3)').addClass('itemPOS4');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>basic set</h2>
<div>Project 1</div>
<div>Project 2</div>
<div>Project 3</div>
<div>Project 4</div>
<div>Project 5</div>
<h2>test set filtered:</h2>
<div>Project 1</div>
<div style="transform: scale(0.001)">Project 2</div>
<div style="transform: scale(0.001)">Project 3</div>
<div>Project 4</div>
<div style="transform: scale(0.001)">Project 5</div>
3条答案
按热度按时间njthzxwz1#
在你的示例中,
:visible
不会工作,因为技术上它仍然没有隐藏,只是 * 真的 * 小。使用not()
代替。更新从你的评论,我假设你想重置计数后5。为此,我们可以使用modulo (or remainder) operator得到一个除法的余数。
有关更多信息,请参阅Attribute Selectors和
not()
pseudo classpkmbmrz72#
首先:这些并不是“隐藏”的。可见与隐藏引用:Difference between :hidden and :not(:visible) in jQuery
此分类上一篇:
我做了什么(大致)
在这里我做了一些操作你的类和多一点,显示如何选择只是那些(这是你的问题)。注意:如果你点击第二个按钮第二次它得到新的第一个.
eqzww0vc3#
你可以这样做(检查控制台):
说明:
1.我们设置一个从1开始的计数器变量
1.我们每隔
div
1.我们检查div是否不具有指定的样式,当发现时,我们使用计数器值应用所需的类,并将计数器递增1。
1.当计数器达到我们的上限(5)时,我们将其设置回1。
个字符