JQuery: Access original jquery object within each

Question

I'm trying to implement HTML radio button behaviour on a set of DIVs in JQuery. I want to remove the "set" class from all the elements then use addClass() to re-set the (one) element that is clicked:

$(".button").each(function() {
  $(this).click(function(){
    // what goes here to call removeClass() on *all* the elements?
    $(this).addClass("set");
  });
});

I want to call removeClass() on all the elements - in this case $(".button"), but I can't refer to $(".button") explicitly.

I can't just call $(".button").removeClass("set") outside the loop as this is part of a bigger program and the behaviour inside the each() loop can be modified by other parameters.

Is there any way to access the full set of elements from inside, or pass them in as a variable? Or is there another way to approach the problem?

Answer 1

This seems needlessly complex, it might help to get a clearer picture of what you are ultimately trying to achieve.

Inside your loop you can fetch whatever you like with jquery $("div") // inside the loop

Answer 2

You say "but I can't refer to $(".button") explicitly.". Why is that?

$(".button").each(function() {
  $(this).click(function(){
    $('.button').removeClass('set'); // this should do it
    $(this).addClass("set");
  });
});

Answer 3

just change:

$(".button").each(function() {
  $(this).click(function(){
    $('.button').removeClass("set");
    $(this).addClass("set");
  });
});

I dont see why that would be a problem, a bit slow having to pull .button each time, but that's the only way containing in a loop like you want to.

Answer 4

I answered the question asked in the body of the text: If you want to set the class of every other element that's a sibling, use siblings.

Interesting because this is in the roadmap under radioClass()

What you want is siblings, and don't use each to set the click event either.

$(".button").click(function() {
  $(this).addClass('set');
  $(this).siblings('.button').removeClass('set');
});

See this example for the above in action:

http://jsbin.com/ewiqe

Answer 5

If you can't hard-code the selector in your inner functions, jQuery can actually return the string used as selector in the original call. See $('.bla').selector

This has been added only in the newer version though.

Answer 6

You may be looking for the new selector feature, since you are making a plugin:

jQuery.fn.test = function() {
    console.log(this.selector); // .button
};

$('.button').test();

Answer 7

Still not sure why you cannot reference $('.button') from the inner function but can you capture the references in a free variable instead?

var buttons = $(".button");
buttons.each(function() {
  $(this).click(function(){
    // what goes here to call removeClass() on *all* the elements?
    buttons.removeClass('set');
    $(this).addClass("set");
  });
});