Selector targets overly obtuse - recommendations? 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 &lt;a&gt; 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?
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();
  });
});