Question

我正在动态生成跨度并将其位置设置为：

        $('#myObstacles').append("<span id=\"" +  test + randX + "\">" + items[randObj] + "</span>");
        document.getElementById("test"+randX).style.position="absolute";
        document.getElementById("test"+randX).style.left=randX;
        document.getElementById("test"+randX).style.top=randY;

然后我有setInterval()函数应该通过调用moveSpans()来经常移动这些DOM跨度：

    function moveSpans() {
        $("#myObstacles span").each(function (index, val) {
            val.style.top-=10;
        });
    }

由于某种原因，附加的DOM跨越#myObstacles不会改变位置。

为什么会这样？

Answer 1

正如Wlises所说，你需要坚持使用jQuery方法或核心JavaScript方法;如果您正在使用jQuery对象（在回调函数中返回为val，如上所述），请坚持使用jQuery方法.css()。

因此：

好：val.css("top","-=10")
BAD ：val.style.top -= 10（这是一个本机JavaScript属性，但对于jQuery对象，没有style属性。只有.css()个访问者/ mutator方法。）

由于您尝试将top减少10px，因此可以使用：val.css("top","-=10")

以下是jQuery文档中的解释：

从jQuery 1.6开始，.css()接受与.animate()类似的相对值。相对值是以+=或-=开头的字符串，用于递增或递减当前值。例如，如果元素的填充左边是10px，.css( "padding-left", "+=15" )将导致总填充左边为25px。

Answer 2

在“function（index，val）”中，“val”是一个jQuery对象，请尝试：

function moveSpans() {
    $("#myObstacles span").each(function (index, val) {
        $(val).css({top: -10});
    });
}

Answer 3

你试过这个吗？

function moveSpans() {
    $("#myObstacles span").each(function (index, val) {
        var $el = $(val)
        $el.css({top: $el.css("top")-10});
    });
}

动态移动DOM元素位置

3 个答案: