-2

内部にグリッドがあり、3 列に 30 項目の巨大な div があります。しかし、それらを正しい方法で表示するには、いくつかのクラスを追加する必要があります。最初のものに prefix_1 を追加し、2 番目と 3 番目に 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');
}
4

2 に答える 2

0

プログラムで 90 個の div 要素にクラスを追加し、DOM に 90 個の変更を加えることは、非常に集中的な作業になります。

@Jeremy の発言 (+1) をエコーし​​、$.each()がほぼ確実に進むべき道であり、内部に条件分岐があると言うでしょう。ただし、これは、パフォーマンスの問題があっても jQuery を使い続ける場合に限られます。(注意してください、これは「やらないでください」のかなりメジャーな言い方です。 )

私はあなた自身にいくつかの質問をしたいと思います..

  • 私のデータはどこから来ていますか?

jQuery の使用に夢中になっている場合は、ハードコードされたデータではないと思いますが、どこから来ているのでしょうか? PHPスクリプト？JSON オブジェクト? (それがハードコーディングされたデータなら、なぜ jQuery を見ているのですか?)

いずれにせよ、DOM にロードする前に、この種のものを整理することを検討してください。Mustache.js やその他のテンプレート システムは、大量のマークアップを生成するのに最適であり、このようなものを実装する機能を提供します。( LinkedIn でのこのトピックに関する素晴らしい議論)

絶対にこの方法でロードする必要があり、正直に言う理由が本当にわからない場合は、列要素をクラスのメンバーとして持たないのはなぜですか? その後、子要素は親要素のプロパティを自動的に継承します。

データが何であり、どこから来ているのかを正確に知らずにそれを達成できる他の方法について議論することは困難ですが、私が理解しようとしている主なポイントはこれです。考える。簡単なオプションだからといって、不十分な実装に急いではいけません。それは維持するのが面倒で、使用するのが面倒です。

  • 実際にロードする必要があるデータの量は?

一度に 90 個の要素すべてが必要ですか? 本当に？

続けて、さらにいくつか質問することもできますが、回答が承認されたようです。最終結果を達成するためのはるかに効果的な方法があるのに、90 個の要素を反復することに固執している場合、ユーザーには申し訳ありません。多くの人がそれが可能であるという理由だけでそれを学ぶ必要があると思います, それはお勧めできません. 残念ながら、これは jQuery タグの傾向のようです。

ただし、CSS ソリューションも指定しました。しかし、たまたま jQuery ベースの最初の回答を選択しました。将来的には、しばらく待ってみてはいかがでしょうか。今、1 週間、または 1 年後にこのトピックにアクセスした人は誰でも、答えを見て、おそらくそれが最善の方法であると結論付けることができます。

于 2012-07-11T00:23:39.723 に答える