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

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.尺-con相对于div.rulers的位置，从它在布局中的位置。基本上，我想知道，如果每个div.尺-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文档 -不计位置()--方法：

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

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

要获得每个单独元素的位置，您必须首先遍历这些元素，然后在元素上使用these ()方法：

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