使用Jquery Position函数

Question

我正在研究一些基本上可以在线创建名片的东西。

我正在尝试用CSS布置div标签。 然后我想获取div标签相对于它们的容器的x和y坐标，以便它可以传递到PHP GD库，以便可以制作图像。

我尝试在jquery中使用.position()函数，但它给出了相对位置。

有没有人有任何可能有帮助的指针？

Answer 1

查看jQuery维度插件以查找元素的正确位置。

编辑：正如评论中所提到的，维度插件已合并到核心。 文档可以在这里找到：偏移和这里的位置。

链接的示例可以像这样扩展：替换以下代码

var x = $("#Company_Name").position().left;
var y = $("#Company_Name").position().top;

$("p:last").text( "Full Name: left: " + x + ", top: " + y );

有了这个：

var $companyname = $("#Company_Name");
var x = $companyname.position().left;
var y = $companyname.position().top;
var ax = $companyname.offset().left;
var ay = $companyname.offset().top;

$("p:last").text( "Full Name: left: " + x + "/" + ax + ", top: " + y + "/" + ay);

注意，我只搜索了一次元素并将其填充到一个变量中。 如果搜索可能需要一些时间，这是一个好主意。

编辑2：我刚刚意识到，这不符合我的预期。 我写了一些函数来计算相对位置：

function toString(obj){
        return "{top: " + obj.top + " left: " + obj.left + "}";
    }

    function getRelativePosition(selector){

        var $parentElem = $("#parentElem");
        var $element = $(selector);

        var elementPosition = $element.position();
        var parentPosition = $parentElem.position();

        return {top: elementPosition.top - parentPosition.top, 
            left: elementPosition.left - parentPosition.left};
    }

  $(document).ready(function(){

        var position = $("#Company_Name").position();
        var relativePosition = getRelativePosition("#Company_Name");

        $("p:last").text("position: " + toString(position) + " relativePosition: " + toString(relativePosition));
    });

如果这对您有用，请告诉我。 有人可能会告诉我jQuery中位置和偏移量之间的区别： - \\

编辑3：要获得多个元素的位置，您可以使用不同的ID调用函数，或者为它们提供所有相同的名称或相同的类，以便有所选择。 这是一个工作示例：

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

function toString(obj){
    return "{top: " + obj.top + " left: " + obj.left + "}";
}

function getRelativePosition(selector){

    var $parentElem = $("#parentElem");
    var $element = $(selector);

    var elementPosition = $element.position();
    var parentPosition = $parentElem.position();

    return {top: elementPosition.top - parentPosition.top, 
        left: elementPosition.left - parentPosition.left};
}

$(document).ready(function(){

$(".cardfield").each(function(i){

    var position = $(this).position();
    var relativePosition = getRelativePosition(this);

    $("p:last").append("element: " + this.id + " position: " + toString(position) + " relativePosition: " + toString(relativePosition) + "<br>");

});
});

</script>
</head>
<body>

<br><br><br><br><br>

<div id="parentElem" style="margin: 0px; top:10px; background-color: #ddd;">
<br><br>
<div class="cardfield" id="Company_Name1">Foo Bar</div>
<br>
<div class="cardfield" id="Company_Name2">Company Name</div>
<div class="cardfield" id="firstname" style="float: right;">Tim</div><br/>
<div class="cardfield" id="lastname" style="float: right;">B&uuml;the</div>
<br><br>
</div>

</p></p>
</body>
</html>

注意：我给了所有字段“cardfield”类，并使用jQuery来选择它们。 然后我使用每个函数来处理元素。 在我给每个函数的内部，“this”指的是当前对象。

Answer 2

对于具有绝对的元素的完美位置

var position = window.jQuery(this).position();

var parent_pos = window.jQuery(this).parent().position();

var xpos = position.top - parent_pos.top;
var ypos = position.left - parent_pos.left;

如果你整个父div名称或id，那么你可以写如下

var parent_pos = window.jQuery(this).parent('#cardcreate').position();

这非常适合它。

使用Jquery Position函数

问题描述

2 个解决方案

解决方案1
4 2009-04-07 10:53:42

解决方案2
0 2012-11-30 11:17:04

使用Jquery Position函数

问题描述

2 个解决方案

解决方案1 4 2009-04-07 10:53:42

解决方案2 0 2012-11-30 11:17:04

解决方案1
4 2009-04-07 10:53:42

解决方案2
0 2012-11-30 11:17:04