javascript - 兄弟要素のクリックをカウントし、すべての兄弟がクリックされたときに CSS を変更する方法は?

Question

私のコードは次のとおりです。

 <div class='container'>
   <label>Label 1</label>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
   <div>5</div>
   <label>Label 2 </label>
   <div>1</div>
   <div>2</div>
   <div>3</div>
   <div>4</div>
  </div>

ユーザーがコンテナ内のdivをクリックすると、このように「クリック」されたクラスを追加します

$(".container>div").click(function(){
  $(this).addClass("clicked");
});

各ラベルの横にある div がいくつクリックされたかを知りたいのですが、すべての div がクリックされたら、そのラベルに CSS クラスを追加したいと考えています。

たとえば、訪問者がラベル 1 の横にある 5 つの div すべてをクリックすると、そのクラスが変更
され、ラベル 2 の横にある 4 つの div についても同様です。

Answer 1

デモ

$(function() {
  var counter = {};
  $(".container>label").each(function(idx) {
    var labelItem = "label"+idx;
    counter[labelItem]={max:$(this).nextUntil("label").size(), cnt:0, idx:idx};

    $(this).nextUntil("label").on("click",function() {
        if (this.className!="clicked") {
          $(this).addClass("clicked");
          counter[labelItem].cnt++;
          if (counter[labelItem].cnt >= counter[labelItem].max) {
              $(this).parent().find('label').eq(idx).addClass("full").append(" full");
          }
          $(this).append(" - clicked and added to "+labelItem+": "+counter[labelItem]);

        }
    });
  });
});