Selector targets overly obtuse - recommendations?

Question

This presumably simple task resulted in much more scripting logic than I thought would be necessary.

Goal: when the user clicks a button inside one of the divs, it affects said div.

Issues: I did not wish to have my function target specific elements in my DOM. (ex. targeting <a> by ID). Also, because my function is traversing the DOM and being called in multiple instances, I had to use $(this) format so as not to be specific to one ID.

Anyways, here is my code:

$(".button").toggle(function(){
    $(this).parent().children(".innerBox").fadeIn();
}, function(){
    $(this).parent().children(".innerBox").fadeOut();
});

It works fine. However, can someone with a little more jQuery savvy please let me how I could execute this function in the future, without having to parse through siblings and making it more convoluted than need be?

Answer 1

You can certainly cache the lookups, abusing of the scopes.

$(".button").each(function(){
  var $btn = $(this);
  var $box = $btn.parent().children(".innerBox");
  $btn.toggle(function(){
    $box.fadeIn();
  }, function(){
    $box.fadeOut();
  });
});

Using .fadeToggle() instead of .fadeIn() and .fadeOut().

$(".button").each(function(){
  var $btn = $(this);
  var $box = $btn.parent().children(".innerBox");
  $btn.click(function(){
    $box.fadeToggle();
  });
});

And last but not least, .siblings().

$(".button").each(function(){
  var $btn = $(this);
  var $box = $btn.siblings(".innerBox");
  $btn.click(function(){
    $box.fadeToggle();
  });
});

Answer 2

My only alteration would be

$(this).parent().children(".innerBox") 

to instead

$(this).siblings(".innerBox")

see here: http://jsbin.com/azamot/1/edit