0

私は自分の本のサイトで次のことをしようとしています：http ：//seanbooks.tumblr.com

  1. クラス「book」の最初の3つのdivにはクラス「fourcol」があり、残りのdivにはクラス「threecol」が必要です。
  2. 「threecol」の4番目のインスタンスごとに、クラス「last」が必要です。

http://api.jquery.com/eq-selector/を使用して、「book」クラスの最初の3つのインスタンスをターゲットにする方法があるかどうか疑問に思っています。

<script>
    $(".book").slice(0, 3).addClass('fourcol').removeClass('threecol')
    .filter(':nth-child(3)').addClass('last').end()
    .filter(':nth-child(4n)').addClass('last');
</script>

助けてくれてありがとう！

4

4 に答える 4

1

あなたが探しているのはlt（）とgt（）スレクターです

$('.book').filter(':lt(3)').addClass('threecol').end() //sets class to first three
          .filter(':gt(2)').addClass('fourcol').end() //sets class to the rest
          .filter(':nth-child(4n)').addClass('last'); //every fourth

フィドル

于 2012-08-19T18:34:51.567 に答える
1

lt（）のマニュアルページに記載されているように、ここでスライスを使用することをお勧めします。

：lt（）はjQuery拡張機能であり、CSS仕様の一部ではないため、：lt（）を使用したクエリでは、ネイティブDOM querySelectorAll（）メソッドによって提供されるパフォーマンスの向上を利用できません。最新のブラウザでパフォーマンスを向上させるには、代わりに$（ "your-pure-css-selector"）。slice（0、index）を使用してください。

http://api.jquery.com/slice/

したがって、たとえば：

$(".book").slice(0, 3).addClass('fourcol').removeClass('threecol');

JQueryのn番目のセレクターを使用して4番目ごとのインスタンスを選択する例を次に示します。

$(".threecol .book:nth-child(4n)").addClass('last');
于 2012-08-19T18:36:29.990 に答える
0

試す

$(".book:lt(3)").addClass('fourcol').removeClass('threecol');

http://api.jquery.com/lt-selector/

クラス「threecol」の4番目のインスタンスごとに選択するには、4番目のインスタンスではない要素を除外できます。

$(".threecol").filter(function(i){
    return (i+1)%4 = 0;
}).addClass('last');
于 2012-08-19T18:35:00.987 に答える
0 
$(".book").addClass('threecol') //add a class of threecol to each element
          .slice(0, 3).addClass('fourcol').removeClass('threecol'); //add fourcol only to the first three elements

この部分を正しく理解したかどうかはわかりませんが、「4番目のインスタンス」の場合は次のことができます。

var count = 0
$(".threecol").each(function() {
    count++;
    if(count === 4) {
        this.className += " last";
        count = 0;
    }
});

または、次のようにn番目の子を使用してみることができます。

$(".threecol:nth-child(4n)").addClass("last")
于 2012-08-19T18:40:20.323 に答える