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

您可以使用带有匿名函数的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')
};

Answer 3

您可以将其封装到执行并返回对象的匿名函数中：

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

Answer 4

同时评估声明对象时的所有语句，因此您无法使用之前的属性的结果。但是，您可以将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')
  }  
}();

根据同一对象的其他属性设置属性值

4 个答案: