动态移动 DOM 元素位置

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

正如Wlise所说，你需要坚持使用jQuery方法或核心JavaScript方法;如果你使用的是jQuery对象（在回调函数中返回，就像上面一样val），坚持使用jQuery方法.css()。

因此：

• 好： val.css("top","-=10")
• BAD：val.style.top -= 10（这是一个原生的JavaScript属性，但对于jQuery对象，没有style属性。只有.css()访问器/突变器方法。

由于您尝试将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});
    });
}