Tag dependence approach

Question

I need to add class is_active to all div's when I click on <div id="all-tags"> and remove class if I click again. Only every div have class is_active then main div (<div id="all-tags">) have class is_active.

Please tell me if this is ok or not. I need as fast of a solution as possible. I'm also not sure using .each() is a very good idea.

I need as fast of a solution as possible. I'm not sure using if .each() is a very good idea.

$("#all-tags").click(function() {
    if ($(this).hasClass("is_active")) {
        $(".tags_cloud div").each(function() {
            $(this).removeClass("is_active");
        });
    } else {
        $(this).addClass("is_active");
        $(".tags_cloud div").each(function() {
            $(this).addClass("is_active");
        });
    }
});

$(".tags_cloud div").click(function() {
    !$(this).is("#all-tags") ? $(this).toggleClass("is_active") : true;
    var c = 0;
    $(".tags_cloud div").each(function() {
        if ($(this).hasClass("is_active") && !$(this).is("#all-tags")) {
            // some my code
        } else if (!$(this).is("#all-tags")) {
            $("#all-tags").removeClass("is_active");
            c = 1;
        }
        c == 0 ? $("#all-tags").addClass("is_active") : true;
    })
});

Answer 1

I updated your code to remove the first click-handler and the each-loops. However I'm not quite sure if this is necessarily faster then your solution.

My suggestion relies on callbacks, css-selectors and conditions:

$(".tags_cloud div").click(function() {

  var $this = $(this),
    $tags = $(".tags_cloud div:not(#all-tags)"),
    $all = $(".tags_cloud div#all-tags");

  var all = $(this).is('#all-tags') ? true : false;
  if (all) {
    $this.toggleClass(function() {
      if (!$(this).hasClass('is_active')) {
        $tags.addClass('is_active');
      } else {
        $tags.removeClass('is_active');
      }
      return "is_active";
    });
  } else {
    $this.toggleClass('is_active');
    ($tags.not('.is_active').length === 0) ? $all.addClass('is_active') : $all.removeClass('is_active');
  }
});

Demo

Answer 2

I guess I would reduce it to this:

$(".tags_cloud div").click(function(){
  if ($(this).attr('id') == "all-tags" && !$(this).hasClass("is_active")) {
    $(".tags_cloud div").addClass("is_active");
  }
  else if ($(this).attr('id') == "all-tags" && $(this).hasClass("is_active")) {
    $(".tags_cloud div").removeClass("is_active");
  }
  else {
    $(this).toggleClass("is_active"); 
    $(".tags_cloud div#all-tags").removeClass("is_active");        
  }
});

It does exactly the same, as far as I can tell. But with half the code and without use of .each()...