Question

我有一个内部有网格的巨大div，3列中有30个项目。但我必须添加一些类以正确的方式显示它们。比如为第一个添加prefix_1，为第二个和第三个添加prefix_2。也是一个阿尔法和欧米茄类。你可以在下面看到。

我现在用jquery做这件事，但那很慢。

有人可以帮助我改进jquery代码吗？或者告诉我如何在css中完成它，并且它仍然可以在ie7 / ie8

中工作

for(var i=0;i<30;i+3)
{
    $('.docs').eq(i).addClass('prefix_1');
}

for(var i=1;i<30;i+3)
{
    $('.docs').eq(i).addClass('prefix_2').addClass('alpha');
}

for(var i=2;i<30;i+3)
{
    $('.docs').eq(i).addClass('prefix_2').addClass('omega');
}

Answer 1

我强烈建议使用选择的.each函数。

http://api.jquery.com/each/

$('.docs').each( function (index){
   if(index%3 == 0){
      $(this).addClass('prefix_1');
   }
   if(index%3 == 1){
      $(this).addClass('prefix_2');
      $(this).addClass('alpha');
   }
   if(index%3 == 2){
      $(this).addClass('prefix_2');
      $(this).addClass('omega');
   }
});

这将迭代所有元素一次。但是，如果您在向90个元素添加类时遇到减速问题，那么jquery或javascript可能不会有问题。

Answer 2

以编程方式将类添加到90个div元素，从而对DOM进行90次更改，这将是非常密集的！

我会回应@Jeremy所说的（+1），并说$.each()几乎肯定是要走的路，以及里面的条件分支。但是，这只是在你要继续使用jQuery的情况下才会出现性能问题。（注意，这是一个非常重要的说法，不这样做。）

我会问自己几个问题..

我的数据来自哪里？

如果您已经开始使用jQuery，那么我猜它不是硬编码数据，那么它来自何处？一个PHP脚本？一个JSON对象？（如果它是硬编码数据，那你为什么要看jQuery？）

无论哪种方式，在将它加载到DOM之前，先看看这种东西的排序。 Mustache.js和其他模板系统非常适合产生大量标记，同时为您提供实现此类操作的能力。（Great discussion on this topic at LinkedIn）

如果你绝对必须以这种方式加载它，我真的不明白为什么要说实话，那么为什么不将列元素作为类的成员呢？然后子元素将自动继承父元素的属性。

如果不确切知道你的数据是什么以及它来自何处，很难讨论你可以实现的其他方法 - 但我想要解决的主要问题是这个;的想。不要因为这是一个简单的选择而急于实施。这很难维护，使用起来很糟糕。

实际需要加载多少数据？

您是否一次需要所有90个元素？真的？

我可以继续问几个问题，但我看到你刚才接受了答案。如果您有更多有效的方法来实现最终结果，那么我会为您的用户感到遗憾。我认为很多的人需要了解，因为它是可能的，这是不可取的。可悲的是，这似乎是jQuery标签的趋势。

但是，您确实指定了CSS解决方案。但是你选择的第一个答案恰好是基于jQuery的。未来或许试试等待一段时间？现在，在一周，甚至一年内访问此主题的任何人都可以看到答案，并可能得出结论认为这是最好的方法。

要列出的不同类别（i 3）

2 个答案: