各クラスについて、要素数とaddClass - jQuery

Question

div内の要素数に応じてクラスを追加するスクリプトを実装しようとしています。私はこれを稼働させていますが、展開するのが難しいので、見つかった各クラスで実行されます。 （悪い言い訳には申し訳ありません）。例以下：

jQueryの

$(".flex-container").each(function() { 

var numItems = $('.btn').length; 

if(numItems==10||numItems==9){ 
    $('.btn').addClass('flexten'); 
    }else if(numItems==8||numItems==7){ 
    $('.btn').addClass('flexeight'); 
    }else if(numItems==6||numItems==5){ 
    $('.btn').addClass('flexsix'); 
    }else if(numItems==4||numItems==3){ 
    $('.btn').addClass('flexfour'); 
    } 
}); 

HTML

<div class="flex-container"> 
<a href="#" class="btn btn-default btn-lg">Text</a> 
<a href="#" class="btn btn-default btn-lg">Text</a> 
<a href="#" class="btn btn-default btn-lg">Text</a> 
<a href="#" class="btn btn-default btn-lg">Text</a> 
</div> 

上記の単語罰金が、私は同じクラス名を持つ新しいdiv要素に追加しよう（フレックスコンテナ）、.btnのカウントはまだ上昇し、したがってaddClass値はdivごとに固定されません。

基本的には、1 divあたりのカウントが適用され、それぞれに正確なaddClass名が追加されます。 これは私が達成しようとしていることに意味があることを願っています。

jQueryは私の強みではないので、どんな助けでも大歓迎です。

乾杯

Answer 1

問題は$('.btn').lengthが.btnクラスとページ上の要素の合計数を返すことです。

のdivあたりの子供の数数えるために、以下の行を試してみてください。

var numItems = $(this).children().length;

をし、選択したdiv要素の唯一.btn子にクラスを追加するには、この行を使用します。

$(this).children('.btn').addClass('flexfour');

子どもの数が多い場合や少ない場合のシナリオをキャッチするために、elseステートメントを追加することをお勧めします。

Here is a jsFiddle.これが役に立ちます。