jQuery Children Method returns unexpected results
<p>I am trying to create two child divs either of which when clicked will give a "highlight" class to the "toggler" class child div ONLY. I am creating a "toggler" selector variable which hold the "toggler" class. However, given the following code, both children divs are given the "highlight" class as opposed to just the "toggler" class which the selector variable is set up to hold.</p>

<p>HTML:</p>

<pre><code>&lt;div class="parent_div"&gt;
  &lt;div class="first_child"&gt;
    First Child Text
  &lt;/div&gt;
  &lt;div class="toggler"&gt;
    Toggler
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.parent_div &gt; div {
    display: inline-block;
    float: left;
    clear: both;
}

.parent_div &gt; div:hover {
    cursor: pointer;
}

.highlight {
    background-color: yellow;
}
</code></pre>

<p>jQuery:</p>

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

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

<p>A fiddle to show the results: <a href="http://jsfiddle.net/bronzegate/5yTBP/" rel="nofollow">http://jsfiddle.net/bronzegate/5yTBP/</a></p>

<p>Changing the jQuery to the following yields the desired results:</p>

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

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

<p>A fiddle to show the results: <a href="http://jsfiddle.net/bronzegate/ZS8P5/" rel="nofollow">http://jsfiddle.net/bronzegate/ZS8P5/</a></p>

<p>Why does the Children method in the former case select both of the children and not exclusively the children that are defined in the "toggler" selector variable?</p>
