在對象聲明中使用jQuery方法.find（）

Question

我是js對象的新手，我試圖在jQuery中編寫一個簡單的插件，但是我在聲明屬性時遇到了問題。
看看這個JSFIDDLE爲了更好地突出顯示的代碼

$.fn.robertSlider = function(params){ 
    var slider = { 
     arrow:    this.find(".slider-arrow"), 
     arrowNext:   this.find(".slider-arrow--arrowNext"), 
     arrowPrev:   this.find(".slider-arrow--arrowPrev"), 
     sliderItem:   this.find(".slider-item"), 
     sliderList:   this.find(".slider-content-list"), 

     itemsOnScreen:  params.itemsOnScreen, 
     marginCollapse:  params.marginCollapse 
    }; 

    slider.amountItems  = slider.sliderItem.length; // is there a way to declare this directly inside the obj? 
    slider.sliderWidth  = slider.sliderList.width(); // is there a way to declare this directly inside the obj? 

    var helpers = { 
     firstVisible:  0, 
     canGoNext:   true, 
     canGoPrev:   false 
    } 
} 




$(".slider-container").robertSlider({ 
     itemsOnScreen:   6, 
     marginCollapse:   10 
}); 

現在我的問題是：什麼是錯與此對象的聲明？
因爲如果我嘗試登錄slider.sliderWidth它不起作用，我得到null。 我試圖登錄slider.sliderList我得到一個完整的不同的結果，因爲我登錄$(".slider-content-list")

UPDATE
這裏的日誌slider.arrow和$(".slider-arrow")之間下面的截圖

希望一切都清楚了:)
在此先感謝！

Answer 1

您不能在對象聲明中設置amountItems或sliderWidth屬性，因爲屬性值將不會被設置，因爲對象尚未聲明。

例如沒關係你是否有：

var a = { 
    x: 1, 
    y: a.x+1 
}; 

或者：

var a = { 
    y: a.x+1, 
    x: 1 
}; 

亦不會工作，因爲對象尚未聲明呢。

你的榜樣下面的工作，但顯然包括代碼重複/性能成本：

var slider = { 
    arrow:    this.find(".slider-arrow"), 
    arrowNext:   this.find(".slider-arrow--arrowNext"), 
    arrowPrev:   this.find(".slider-arrow--arrowPrev"), 
    sliderItem:   this.find(".slider-item"), 
    sliderList:   this.find(".slider-content-list"), 

    itemsOnScreen:  params.itemsOnScreen, 
    marginCollapse:  params.marginCollapse, 

    amountItems:  this.find(".slider-item").length, 
    sliderWidth:  this.find(".slider-item").width() 
}; 

或者你可以這樣做：

var obj = { 
    arrow:    this.find(".slider-arrow"), 
    arrowNext:   this.find(".slider-arrow--arrowNext"), 
    arrowPrev:   this.find(".slider-arrow--arrowPrev"), 
    sliderItem:   this.find(".slider-item"), 
    sliderList:   this.find(".slider-content-list"), 
} 

var slider = { 
    arrow:    obj.arrow, 
    arrowNext:   obj.arrowNext, 
    arrowPrev:   obj.arrowPrev, 
    sliderItem:   obj.sliderItem, 
    sliderList:   obj.sliderList, 

    itemsOnScreen:  params.itemsOnScreen, 
    marginCollapse:  params.marginCollapse, 

    amountItems:  obj.sliderItem.length, 
    sliderWidth:  obj.sliderItem.width() 
};