CODEWITHSUNDEEP
jqueryeach
simoncoggins
simoncoggins

Reputation: 398

JQuery: Access original jquery object within each

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?

Upvotes: 2

Views: 3108

Answers (7)

cgp
cgp

Reputation: 41381

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

Upvotes: 0

flatline
flatline

Reputation: 42613

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");
  });
});

Upvotes: 0

Paolo Bergantino
Paolo Bergantino

Reputation: 488394

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

Upvotes: 3

duckyflip
duckyflip

Reputation: 16499

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.

Upvotes: 2

Dmitri Farkov
Dmitri Farkov

Reputation: 9671

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.

Upvotes: 0

Clyde
Clyde

Reputation: 8145

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");
  });
});

Upvotes: 0

Martin Murphy
Martin Murphy

Reputation: 1805

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

Upvotes: 0

Related Questions