Question

我想将jQuery元素放在相对于我的页面Wrapper的位置。我将整个页面包含在一个名为Wrapper的div中。我目前的代码是：

<script type="text/javascript">
$(function() {
$('a.poplightOne').hover(function(e) {
        var html =    '<div id="infoOne">'
        html +=     '</div>';               
        $('body').append(html).children('#infoOne').hide().fadeIn(400);
        $('#infoOne').css({
            position: 'absolute',
        top: '10px',
            left: '10px
    });
}, function() {
    $('#infoOne').remove();
});
});
</script>

Answer 1

如果Wrapper是你的容器div的id，你不能只是将你的html附加到那个而不是身体吗？

<script type="text/javascript">
$(function() {
$('a.poplightOne').hover(function(e) {
        var html =    '<div id="infoOne">'
        html +=     '</div>';               
        $('#Wrapper').append(html).children('#infoOne').hide().fadeIn(400);
        $('#infoOne').css({
            position: 'absolute',
        top: '10px',
            left: '10px
    });
}, function() {
    $('#infoOne').remove();
});
});
</script>

我不确定我是否正确理解它。如果你希望你的div来自你的Wrapper元素，那么你的js看起来很好，但你必须改变你的css，所以身体是相对的，你的Wrapper和新元素都需要有可能浮动的相对css。

Answer 2

我相信您正在寻找$('#referenceElement').position()或$('#referenceElement').offset()，具体取决于您想要找到的位置。

Answer 3

DOM操作有很多不同的方法，并以各种顺序将元素附加到DOM。以下是一些：

只需访问api.jquery.com并查看选项。

如果您的意思是将其放置在页面上另一个元素的上方/上方/上方，您可以使用position()找出现有元素的位置，并根据需要设置新元素，并将其设置为基础。

Answer 4

试试这个

$(function() {
    $('a.poplightOne').hover(function(e) {
        var leftvar=e.pageX;
        var topvar=e.pageY;
        var html =    '<div id="infoOne">'
        html +=     '</div>';               
        $('body').append(html).children('#infoOne').hide().fadeIn(400);
        $('#infoOne').css({
            position: 'absolute',
            top: topvar,
            left: leftvar
        });

     });
});

如何相对于另一个元素定位我的jQuery元素

4 个答案: