How to count clicks on sibling elements and change CSS when all siblings have been clicked?

Question

My code is :

 <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>

If user clicks on div inside container, I am adding class "clicked" like this

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

I want to know how many divs are clicked next to each label and when all divs have been clicked, I want to add a CSS class to that label

For example when the visitor have clicked all 5 divs next to Label 1 change its class,
ditto for the 4 divs next to Label 2

Also, I want to know what you have attempted in regards to your requirements — Andreas Wong, Apr 16 '12 at 04:09
I don't know how to find that label and count of number of div clicked next to label — Tushar Ahirrao, Apr 16 '12 at 04:10
I have **ANSWERED** it [>>HERE<<](http://jsfiddle.net/mplungjan/bKYQ3/) using [nextUntil](http://api.jquery.com/nextUntil/). I hope I will be allowed/able to paste the answer if this question is ever opened again. — mplungjan, Oct 17 '12 at 14:15

score 0 · Answer 1 · answered Oct 18 '12 at 16:25

DEMO

$(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]);

        }
    });
  });
});

How to count clicks on sibling elements and change CSS when all siblings have been clicked?

1 Answers1