javascript dom对象数组？答案

【问题标题】：javascript dom object array?javascript dom对象数组？
【发布时间】：2014-11-02 17:49:16
【问题描述】：

我的文档中有对象。我在“每个”方法中从这些对象创建一个数组，并尝试在另一个“每个”方法中获取它们。我在控制台中为两个“每个”方法编写数组。元素匹配，但它们的位置不匹配。

var deletedObjects = [];

$(".active").each(function (index) {
    var deletedObject = $(this);

    console.log(deletedObject.position());
    console.log("-------------------------------------");

    deletedObjects.push(deletedObject);
    deletedObject.delay(100 * index).fadeOut(100);

}).promise().done(function () {
    console.log("Same list again");
    console.log("-------------------------------------");
    $.each(deletedObjects,function(){
        console.log($(this).position());
        console.log("-------------------------------------");
    });
});

console.log 输出

Object {top: 80, left: 160} 
------------------------------------- 
Object {top: 80, left: 200} 
------------------------------------- 
Object {top: 80, left: 240} 
------------------------------------- 
Same list again
------------------------------------- 
Object {top: 0, left: 0} 
------------------------------------- 
Object {top: 0, left: 0}
------------------------------------- 
Object {top: 0, left: 0} 
-------------------------------------

这个代码deletedObject.delay(100 * index).fadeOut(100); 是否在第二个之前运行？为什么元素位置会发生变化？我该如何解决这个问题？

【问题讨论】：

元素位置已更改，因为它不再显示...是的动画（fadeOut）在第二个之前执行...因为您已将该代码作为完成回调附加到动画队列承诺
@ArunPJohny，谢谢。但是我该如何解决呢？
jsfiddle.net/arunpjohny/bsa2jL88/1 - 你为什么使用promise().done()？
你能用另一个像 id 这样的 attr 试试吗？我猜也许淡出会改变 div 的位置
因为有一个事件，我在第一个“each”方法之前停止它，并在 promise().done() 中再次绑定它的事件。检查这个：stackoverflow.com/questions/25708839/…

标签： javascript jquery arrays each

【解决方案1】：

有两种解决方案。你自己发现的第一个：将位置对象推入第二个数组并引用它。

第二个工作如下： fadeOut() 最终设置对象样式display: 'none'。正如@Arun P Johny 解释的那样，未显示的元素不再有位置。因此，我们将 display 属性切换为默认值，然后将元素位置设置为无。

我只显示带有你的 promise.done-callback 的 sn-p：

}).promise().done(function () {
    console.log("Same list again");
    console.log("-------------------------------------");
    $(deletedObjects).css('display', '')
        .each(function(){
            console.log($(this).position());
            console.log("-------------------------------------");
        })
        .css('display', 'none');
});

由于这种方法既昂贵又有点迂回，我更喜欢第二个数组。

【讨论】：

【解决方案2】：

这是因为第二部分在.promise().done 上运行，并且动画是一个承诺，所以它只会在第一部分中的所有元素都淡出时执行。我通过将第二部分移出进行测试，它确实使用原始元素位置打印它：

var deletedObjects = [];

$(".active").each(function (index) {
    var deletedObject = $(this);

    console.log(deletedObject.position());
    console.log("-------------------------------------");

    deletedObjects.push(deletedObject);
    deletedObject.delay(100 * index).fadeOut(100);

});

console.log("Same list again");
console.log("-------------------------------------");
$.each(deletedObjects, function () {
    console.log($(this).position());
    console.log("-------------------------------------");
});

【讨论】：