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?

why can't you refer to $(".button") explicitly at that point? — Geoff
– Geoff, Commented May 22, 2009 at 18:57
I'm trying to write a plugin that would be called by: $("selector").myPlugin() so the contents of the jquery object is going to be different each time. — simoncoggins
– simoncoggins, Commented May 22, 2009 at 19:01
Create a global var with the selector for this jquery object. And pass it in inside functions. I do think you are making this overcomplicated, overlook your architecture and check that you know what's going on. — Dmitri Farkov
– Dmitri Farkov, Commented May 22, 2009 at 19:03
Why would you use each to set the click event? I really don't understand why this was repeated in all the other answers either. — cgp
– cgp, Commented May 22, 2009 at 19:05
Question: Why are you basically reimplementing radio buttons in CSS rather than just using the <input name="something" type="radio"> construct? — Powerlord
– Powerlord, Commented May 22, 2009 at 19:51

Paolo Bergantino · Accepted Answer · 2009-05-22 19:19:15Z

3

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

answered May 22, 2009 at 19:19

Paolo Bergantino

490k83 gold badges524 silver badges437 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

duckyflip · Accepted Answer · 2009-05-22 19:06:18Z

2

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.

answered May 22, 2009 at 19:06

duckyflip

16.5k5 gold badges36 silver badges35 bronze badges

Comments

Martin Murphy · Accepted Answer · 2009-05-22 18:55:34Z

0

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

answered May 22, 2009 at 18:55

Martin Murphy

1,8092 gold badges17 silver badges24 bronze badges

1 Comment

Martin Murphy Over a year ago

Oh you can set this to a variable btw. $(".button").each(function(){ var btn = this; $(this).click(function(){ btn.css("font-weight", "bold") });

Clyde · Accepted Answer · 2009-05-22 18:56:46Z

0

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

answered May 22, 2009 at 18:56

Clyde

8,18513 gold badges59 silver badges88 bronze badges

Comments

Dmitri Farkov · Accepted Answer · 2009-05-22 18:57:16Z

0

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.

answered May 22, 2009 at 18:57

Dmitri Farkov

9,7411 gold badge32 silver badges45 bronze badges

1 Comment

Dmitri Farkov Over a year ago

I don't see why I got flagged down?

flatline · Accepted Answer · 2009-05-22 19:31:45Z

0

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

answered May 22, 2009 at 19:31

flatline

42.7k5 gold badges35 silver badges40 bronze badges

1 Comment

xenon Over a year ago

Posted the same thing, Dmitri Farkov replied "Callback function has its own scope so No."

cgp · Accepted Answer · 2009-05-22 21:25:39Z

0

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

edited May 22, 2009 at 21:25

answered May 22, 2009 at 18:57

cgp

41.4k12 gold badges107 silver badges131 bronze badges

2 Comments

simoncoggins Over a year ago

Thank you, yes that is what I had in mind. One issue I see is that if their were other (none button) elements at the same DOM level they might be selected too.

cgp Over a year ago

@simoncoggins True! I updated it to use the class selector so that won't happen.

Collectives™ on Stack Overflow

JQuery: Access original jquery object within each

7 Answers 7

Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related