4

投稿のリストを含むブログページを作成しています。たとえば、各ブログ投稿には同じhtmlがあります。

<article class="post">
  post 1
</article>

7つの記事ごとに一連のクラス（「中」、「小」、「大」、「大」、「小」、「小」、「中」）を与えたい

<article class="post medium">
  post 1
</article>
<article class="post small">
  post 2
</article>
<article class="post large">
  post 3
</article>
<article class="post large">
  post 4
</article>

ブログ番号8を投稿すると、最初からやり直します。これも可能ですか？

正しい方向へのポイントは大歓迎です！

4

5 に答える 5

4

addClass を使用して、そのインデックスを確認できます。

var classNames = ['medium','small','large','large','small','small','medium'];

$('article.post').addClass(function(i){
    return classNames[ i % classNames.length ];
});

デモ: http://jsfiddle.net/wgdv4/

于 2012-11-19T17:06:14.893 に答える
3

CSS3 セレクターを使用することをお勧めします。JavaScriptのタグが付けられていることは知っていますが、既に HTML5 を使用しているので、同様に使用することもできます。正直なところ、純粋な JS や JQuery 関数を書き出すのに比べて、かなりの時間を節約できます。とにかく、ここでセレクターを調べてください

これにより、セット内の最初のノードのクラスが変更され、次に 8 番目、15 番目などとポスト ミディアムに変更され、同じ方法で続けられますが、ポスト スモールの場合は 2 番目、9 番目などになります。

ul li:nth-child(1n+7) {  
  class: "post medium";
}

ul li:nth-child(2n+7) {  
  class: "post small";
}
于 2012-11-19T17:04:44.907 に答える
2

jQuery を使用すると、次の方法でこれを行うことができます。

var classes = ["medium", "small", "large", "large", "small", "small", "medium"];
$(".post").each(function(i) {
    $(this).addClass(classes[i % classes.length]);
});

デモ: http://jsfiddle.net/DCYjF/

于 2012-11-19T17:05:59.187 に答える
2 
var klasses = ['medium','small','large','large','small','small','medium'];

$('article.post').each(function( index)
{
$(this).addClass( klasses[index % klasses.length] );
});

これは、クラスの配列であるindexからプルする変数を使用して、投稿を反復処理します。klasses配列の「最後」に到達すると、オペレーターklassesのおかげで最初からやり直します。%

編集：私たちの多くが同様のソリューションを使用したようです。注意すべきことは、このソリューションでは、ハードコーディングされた 7 ではなく、項目数の指標として .length を使用することです。この回答を受け入れなくてもかまいませんが、長さを使用することをお勧めします。他の場所でコードを変更することなく、クラスを追加/削除します。

于 2012-11-19T17:06:17.503 に答える
0

mod operator- (%) を検索します。(n % 7 == 0) を実行すると、n が 7 で割り切れる場合 (n は現在の投稿の ID) に true が返されます。これを使用して、スタイル カウントをリセットできます。

于 2012-11-19T17:03:26.330 に答える