根據同一對象的其他屬性設置屬性值

Question

這是我的代碼。

var myApp = { 
    nav    : $('#top_nav .nav'), 
    primary_navs  : $('#top_nav .nav').find('> li'), 
    secondary_navs : $('#top_nav .nav').find('> li').find('.secondary > li') 
} 

這是有效的，但我不希望重複jQuery選擇器函數一遍又一遍。我想這樣做，

primary_navs  : nav.find('> li') 

但這給了我「導航未定義」。我試過myApp.nav和this，但顯然這兩種方式都不符合我認爲他們應該做的。在定義同一對象的新屬性時，如何引用對象的屬性？

Answer 1

緩存變量

var $nav = $('#top_nav .nav'); 

然後你可以多次使用它在你的代碼

var $nav = $('#top_nav .nav'), 
    $childrenLi = $nav.children('li'); 

var myApp = { 
    nav    : $nav , 
    primary_navs  : $childrenLi , 
    secondary_navs : $childrenLi.find('.secondary > li') 
} 

您還可以使用children得到直接孩子。

$('#top_nav .nav').find('> li')一樣$('#top_nav .nav').children('li')

Answer 2

您可以將其封裝成執行並返回一個對象的匿名函數：

var myApp = (function($nav) { 
    return { 
     nav: $nav, 
     primary_navs: $nav.find('> li'), 
     secondary_navs: $nav.find('> li').find('.secondary > li') 
    }; 
}($('#top_nav .nav'))); 

Answer 3

所有當你在聲明對象的語句在同一時間進行評估，以便您無法使用之前的屬性的結果。然而，你可以做的是設置你的MyApp等於一個立即被評估並返回一個對象的函數。

例如

var myApp = function() { 
    var $nav, $primary_navs; 
    var $nav = $('#top_nav .nav'); 
    var $primary_navs = $nav.find('> li'); 
    return { 
    nav: $nav, 
    primary_navs: $primary_navs, 
    secondary_navs = $primary_navs.find('.secondary > li') 
    } 
}(); 

Answer 4

您可以使用new一個匿名函數的對象：

var myApp = new function(){ 
    this.nav = $('#top_nav .nav'); 
    this.primary_navs = this.nav.children('li'); 
    this.secondary_navs = this.primary_navs.find('.secondary > li') 
};