獲取有關非絕對元素相對於父

Question

現在的位置我有一個渲染得非常好玉模板和設置是這樣的：

div.rulers 
    div.ruler-con.js.this-site 
     div.ui.red.progress 
      div.label jQuery 
      div.bar.jquery 
    div.ruler-con.js.template.pretty-good 
     div.ui.red.progress 
      div.label Underscore JS 
      div.bar.underscore.pretty-good 
    div.ruler-con.js.pretty-good 
     div.ui.red.progress 
      div.label Angular JS 
      div.bar.angular.pretty-good 
    div.ruler-con.js.this-site.server.scripting 
     div.ui.red.progress 
      div.label Node JS 
      div.bar.node 

父DIV div.rulers有一個CSS規則相對位置。我試圖做的是找出每個div.ruler-con位置頂部相對於div.rulers，從它坐在佈局。基本上，我想知道，如果每個div.ruler-con是絕對的位置，它將位置頂部相對於div.rulers。我曾嘗試：

var top = $(skill).position(); 

console.log(top); 

和：

var top = $(skill).offset(); 

console.log(top); 

兩者都返回top:0和left:0。有沒有人對我如何獲得這個價值有任何建議？

作爲參考，變量「技能」各自div.ruler-CON作爲在一個循環中的變量。我通過所有這些div.ruler.con

感謝的循環，

編輯：

這是我現在的javascript：

var _skills = { 
    each: function(skill_function, other) { 
     $('div.ruler-con').each(function(i, value) { 
      _skill_function(value, other) 
     }); 
    }, 
    set: function(skill) { 
     var top = $(skill).position(); 

     console.log(top); 
    }, 
    filter: function(skill, class) { 
     if ($(skill).hasClass(class)) { 
      $(skill).fadeIn(); 
     } else { 
      $(skill).fadeOut(); 
     } 
    } 
} 

Answer 1

從jQuery API Documentation不管位置（ ）方法：

描述：獲取匹配元素集合中第一個元素相對於偏移父元素的當前座標。

所以它是正確的，是珍惜你gettings爲{top: 0, left: 0}，因爲在你的元素集合的第一div.ruler.con很可能不是絕對定位。

要獲得每個個體元件的位置，則首先通過這些元件必須循環，然後用元件上位置（）方法：

var _skills = { 
    each: function(skill_function, other) { 
     $('div.ruler-con').each(function(i, value) { 
      _skill_function(value, other); 
     }); 
    }, 
    set: function(skill) { 
     $(skill).each(function() { 
      console.log($(this).position()); 
     }); 
    }, 
    filter: function(skill, className) { 
     if ($(skill).hasClass(className)) { 
      $(skill).fadeIn(); 
     } else { 
      $(skill).fadeOut(); 
     } 
    } 
};