-2

im having a huge div with a grid inside, 30 items in 3 columns. but i have to add some classes to show them in the right way. like adding prefix_1 for the first one, prefix_2 for the second and 3th. also a alpha and a omega class. like you can see below.

im doing it with jquery at the moment, but thats very slow.

can someone help me to improve the jquery code? or tell me how to do it in css, and that it will still work in 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');
}
4

2 回答 2

1

I would strongly recommend using the .each function of a selection.

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

This will iterate over all the elements once. Though, if you are having slowdown issues adding classes to 90 elements, it may not be a problem with jquery or javascript.

于 2012-07-11T00:10:29.403 回答
0

Programmatic-ally adding classes to 90 div elements, thus making 90 changes to the DOM, is going to be a very intensive!

I would echo what @Jeremy has said (+1) and say that $.each() is almost certainly the way to go, along with a conditional branch inside. However, that's only if you're going to continue with using jQuery despite the performance issues. (Note, that's a pretty major way of saying don't do it.)

I'd ask a few questions to yourself..

  • Where is my data coming from?

If you're dead set on using jQuery then I'm guessing it's not hardcoded data, so where is it coming from? A PHP script? A JSON object? (If it is hardcoded data, then why the hell are you looking at jQuery?)

Either way, look at sorting this kind of stuff out BEFORE loading it into the DOM. Mustache.js and other templating systems are perfect for generating large amounts of mark-up whilst giving you some ability to implement things like this. (Great discussion on this topic at LinkedIn)

If you absolutely must load it this way, and I really can't see why to be quite honest, then why not have the column elements as a member of the class? Then the child elements will automatically inherit the properties of the parent element.

It's hard to discuss other ways that you could achieve it without knowing exactly what your data is and where it's coming from - but the main point I'm trying to get across is this; think. Don't rush into a poor implementation just because it's the easy option. That sucks to maintain and it sucks to use.

  • How much data actually needs to be loaded?

Do you need all 90 elements at once? Really?

I could go on and ask a few more questions, but I see you've just accepted an answer. I feel sorry for your users if you're that set on iterating through 90 elements when there are far more effective ways to achieve the end result. I think a lot of people need to learn that just because it's possible, it's not advisable. Sadly, this seems to be a trend with the jQuery tag.

To your credit however, you did specify CSS solutions too. But you selected the first answer you got which just happened to be jQuery based. In the future perhaps try and wait a while? Anyone visiting this topic now, in a week, or even a year - could see the answer and perhaps conclude that it's the best method.

于 2012-07-11T00:23:39.723 回答