获取相对于父母的非绝对元素的位置

Question

现在我有一个呈现得非常好的Jade模板并设置如下：

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.rulers 的每个 div.ruler-con 位置，从它位于布局中的位置。基本上，我想知道，如果每个 div.ruler-con 绝对位置，那么它的位置最重要的是相对于 div.rulers 。我试过了：

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

console.log(top);

和

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

console.log(top);

两者都返回top:0和left:0。有没有人对我如何获得这个价值有任何建议？

供参考，变量＆＃39; 技能＆＃39;是每个 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无论position（）方法：

  

描述：获取匹配元素集中第一个元素的当前坐标，相对于偏移父元素。

所以这是正确的，你获得的价值是{top: 0, left: 0}，因为你的元素集中的第一个div.ruler.con很可能不是绝对定位的。

要获取每个元素的位置，必须首先遍历这些元素，然后在元素上使用position（）方法：

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();
        }
    }
};