What you're doing right now is already the best way to do it. It's called a
"closure" and it's one of the most powerful features in JavaScript.
You can simplify the code a bit. Try this:
$('.responsibleCouncil .category').each(function() {
var $category = $(this);
$category.find('.toggler input').click(function() {
$category.siblings().find('ul').hide();
$category.find('ul').show();
});
});
What I changed:
* Remove input and siblings variables; they're only used once and it's just
as easy to put the code for each one inline.
* No duplicate $(this) calls.
* No redundant $() wrapping of variables that are already jQuery objects,
like $(category) and $(siblings) in the original code.
* $ prefix on $category variable name since it's a jQuery object, and single
quotes instead of double. Neither is required, but both are good coding
practices. The $ prefix gives a nice visual resemblance between the variable
name and the original $() call. Single quotes let you avoid escaping double
quotes inside a string - typically a more common case than the other way
around, because of HTML attributes - plus they're easier to type. :-)
-Mike
> From: 703designs
>
> What I'm trying to figure out is how I can access parent
> scopes from a nested anonymous function. As you can see here,
> I'm managing to do this by assigning "this" to variables, but
> I know that there's a way to pass "this" into the anonymous functions:
>
> $(".responsibleCouncil .category").each(function() {
> var category = $(this);
> var input = $(this).find(".toggler input");
> var siblings = $(this).siblings();
>
> input.click(function() {
> $(siblings).find("ul").hide();
> $(category).find("ul").show();
> });
> });
>
> Basically, those three assignments at the top of the first
> anonymous function would be unnecessary if I knew of a better
> way to access "this" from nested functions.
