jQuery儿童方法返回意外的结果

我想创建两个子div，其中任何一个单击时都会给“toggler”类的子div赋予一个“高亮”类。我正在创建一个“触发器”选择器变量，它包含“触发器”类。然而，考虑到下面的代码，这两个子div都被赋予了“highlight”类，而不是仅仅是选择器变量被设置为保存的“toggler”类。jQuery儿童方法返回意外的结果

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的followi NG产生期望的结果：

$(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/

为什么儿童方法在前者的情况下选择这两个孩子，而不是只在中定义的孩子“触发器“选择器变量？

来源

2013-05-29 BronzeGate