jquery - jQuery Children メソッドが予期しない結果を返す

Question

2 つの子 div を作成しようとしていますが、いずれかをクリックすると、「トグル」クラスの子 div のみに「ハイライト」クラスが与えられます。「トグル」クラスを保持する「トグル」セレクター変数を作成しています。ただし、次のコードでは、セレクター変数が保持するように設定されている「トグル」クラスだけではなく、両方の子 div に「ハイライト」クラスが与えられます。

HTML:

<div class="parent_div">
  <div class="first_child">
    First Child Text
  </div>
  <div class="toggler">
    Toggler
  </div>
</div>

CSS:

.parent_div > div {
    display: inline-block;
    float: left;
    clear: both;
}

.parent_div > div:hover {
    cursor: pointer;
}

.highlight {
    background-color: yellow;
}

jQuery:

$(document).ready(function() {
  var toggler = $('.toggler');
  var eitherChild = $('.first_child, .toggler');

  eitherChild.click(function() {
      var thisParent = $(this).parent();
      thisParent.children(toggler).toggleClass('highlight');
  });
});

結果を表示するフィドル: http://jsfiddle.net/bronzegate/5yTBP/

jQuery を次のように変更すると、目的の結果が得られます。

$(document).ready(function() {
  var eitherChild = $('.first_child, .toggler');

  eitherChild.click(function() {
      var thisParent = $(this).parent();
      thisParent.children('.toggler').toggleClass('highlight');
  });
});

結果を表示するフィドル: http://jsfiddle.net/bronzegate/ZS8P5/

前者の Children メソッドが、"toggler" セレクター変数で定義されている子だけではなく、両方の子を選択するのはなぜですか?