4

すべてのdiv番号4、8、12、16などにクラス「last」を追加する方法。これは大きな問題ではないと思いますよね?

前 :

<div id="main">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div>Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div>Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div>Element 12</div>
</div>

<div id="main">
    <div>Element 1</div>
    <div>Element 2</div>
    <div>Element 3</div>
    <div class="last">Element 4</div>
    <div>Element 5</div>
    <div>Element 6</div>
    <div>Element 7</div>
    <div class="last">Element 8</div>
    <div>Element 9</div>
    <div>Element 10</div>
    <div>Element 11</div>
    <div class="last">Element 12</div>
</div>

ありがとう。

4

3 に答える 3

11
$('#main > div:nth-child(4n)').addClass('last');

フィドルの例:http://jsfiddle.net/T7fE6/

注:これらの要素に何らかのスタイルを適用する必要がある場合(およびIE8または以前のIEブラウザーをサポートしていない場合)、CSSにそのセレクターを定義するだけで済みます。

 #main > div:nth-child(4n) {
     /* supported by IE9+ and all modern browser */
 }
于 2012-05-21T07:37:04.853 に答える
2

あなたのマークアップが本当に要素だけであるなら、 F。カルデランの答えは行く方法です。div

他の要素も含まれている可能性があり、それらを無視したい場合は、次のようにします。

$("#main > div").filter(function(index) {
  return index % 4 === 3;
}).addClass("last");

実例| ソース

div:nth-child(4n) これは、4 divごとを意味しているように見えても、そうではないためです。これは、親コンテナの4番目、8番目などの要素であるdivを意味します。したがって、他の人をそこに投げ込むと、機能しません。

しかし、繰り返しになりますが、sしかない場合はdiv、Fの答えが最適です。

于 2012-05-21T07:41:16.313 に答える
2

あなたはこれを行うことができます

$(document).ready(function(){
 $('#main div').each(function(e){
     if((e+1) % 4 == 0){
         $(this).addClass('last');
     }
 });
})
​

これが実行例です

ここで例を見つけてください

お役に立てば幸いです...

于 2012-05-21T07:44:41.743 に答える