0

OK、いくつかのブログ投稿を表示するために、jQuery で動的に div を作成しました。

<div class="blog-items">
    <div class="blog-item"></div>
</div>

以下の jQuery は、nomargin のクラスを追加して、最後のブロックのマージンを削除します。ループをリセットして、新しい行で再び開始するにはどうすればよいですか。現在、残りのブロックには nomargin クラスが適用されています。

ここにjQueryの抜粋があります

var blogItemLength = $('.blog-item').length;
if(blogItemLength > 2) {
    $('.blog-item:gt(1)').removeClass("blog-item").addClass("blog-item_nomargin");
}

それが理にかなっていることを願っています、事前に感謝します。

4

4 に答える 4

0

あなたの問題について私が理解していることから、私はお勧めします：

$('.blog-item').filter(function(i){
    return (i + 1)%3 === 0;
}).removeClass('blog-item').addClass('blog-item_nomargin');

これはすべての.blog-item要素を取得し、それらをフィルタリングして 3 番目、6 番目、9 番目... の要素のみを保持し、class-name を削除してblog-itemclass-name を追加しblog-item_nomarginます。

参考文献:

于 2013-07-10T23:26:29.280 に答える
0

セレクターの使用は、 (より大きい) セレクターよりもlast()明確です。gt()

$('.blog-item').last().removeClass("blog-item").addClass("blog-item_nomargin");

ただし、使用する必要がある場合gt():

$('.blog-item:gt(-2)').removeClass("blog-item").addClass("blog-item_nomargin");

ページに複数の div.blog-items 要素がある場合は、次のような操作が必要になる場合があることに注意してください。

$('.blog-items').each(function(index){
    $(this).children('.blog-item').last().removeClass("blog-item").addClass("blog-item_nomargin");
});

参考文献

http://api.jquery.com/last/
http://api.jquery.com/gt-selector/

于 2013-07-10T23:26:33.917 に答える
0

あなたが達成しようとしていることを正確に理解していないため、jquery の質問には答えられません。

しかし、CSS セレクターの使用を検討したことはありますか? 最後の .blog-item を別のスタイルにしたい場合は、次を使用できます。

.blog-item:last-child {
    color: red; /* or whatever */
}

他のより複雑なシナリオには、:nth-last-child() があります。

于 2013-07-10T23:16:20.213 に答える
0

あなたの問題について私が理解したことから、私はこれを試しました：

var blogItemLength = $('.blog-item').length;
 $('.blog-items').each(function () {
  if(blogItemLength > 2) {
   $(this).find('.blog-item').last().removeClass("blog-item").addClass("blog-item_nomargin");
 }    
});

http://jsfiddle.net/steo/BEmjA/ (いくつかのサンプル クラスを使用しました。)

私が書いたコードはclass、各グループの 3 番目の項目のblog-items

これが理にかなっていることを願っています。

于 2013-07-10T23:30:43.867 に答える