jQuery兒童方法返回意外的結果

Question

我想創建兩個子div，其中任何一個單擊時都會給「toggler」類的子div賦予一個「高亮」類。我正在創建一個「觸發器」選擇器變量，它包含「觸發器」類。然而，考慮到下面的代碼，這兩個子div都被賦予了「highlight」類，而不是僅僅是選擇器變量被設置爲保存的「toggler」類。

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/

爲什麼兒童方法在前者的情況下選擇這兩個孩子，而不是隻在中定義的孩子「觸發器「選擇器變量？

Answer 1

孩子（）函數接受一個選擇器：

http://api.jquery.com/children/

。兒童（[選擇器]）

返回： jQuery的

描述：獲取孩子在匹配的元素集合中的每個元素，任選地被 選擇器過濾的 。

選擇器：包含選擇器表達式以匹配元素的字符串。

在第一種情況下（錯了），你傳遞一個對象，這將失敗：

var toggler = $('.toggler'); 

在第二種情況下，你只是路過的選擇（「.toggler」 ），這就是爲什麼它按預期工作。

Answer 2

因爲.children()方法只接受用於篩選的字符串選擇器。不是元素。

報價

.children([selector ])
選擇
類型：選擇
含有選擇表達用於匹配元素甲字符串。

---

你努力實現可以用做什麼.filter()（這不接受元素或jQuery對象作爲參數），但它仍然使得在這種情況下沒有意義..

thisParent.children().filter(toggler).toggleClass('highlight'); 

Answer 3

只因爲.children()接受selector，而不是一個jQuery對象

個
• http://api.jquery.com/children/