Javascript 每个功能未按预期工作

所以我试着做以下几点：

我在3列中得到了一些项目和默认位置（

position:static

）
我正试图将它们转换为

top:0；左侧：页面的0

<在CSS3中，不同职位之间的转换（

absolute

和

static

）是不可能的，因此我尝试了一种jQuery解决方法：

$(".item").each(function(){
  var items = $(this);
  $(this).css({
      'width': items.width(),
      'height': items.height(),
      'position': 'absolute',
      'top': items.offset().top,
      'left': items.offset().left
  });
});

这应该做的是，使用class

item

获取每个项目，并在现有位置使用

position:absolute

将其“复制”到一个项目上。但是一旦我得到了多个项目，它就会简单地将它们堆叠在第一个项目的位置…

---

这是一把小提琴：

$（“.item”）。每个（函数（）{
var项目=$（此项）；
$（this.css）({
“宽度”：items.width（），
“高度”：items.height（），
'位置'：'绝对'，
“顶部”：items.offset（）.top，
“left”：items.offset（）.left
});
});
#项目{
-webkit列数：3；
-webkit柱间隙：10px；
-moz列数：3；
-moz柱间距：10px；
列数：3；
柱间距：10px；
}
.项目{
宽度：100%；
高度：20px；
文本对齐：居中；
溢出：隐藏；
裕度：0 10px 0；
边框：1px纯黑；
}

1.
2.
3.
4.
4.
在CSS3中，不同位置（绝对位置和静态位置）之间的转换是不可能的，因此我尝试了一种jQuery解决方法：“可以通过在默认情况下使用static，然后附加一个具有绝对位置的类来解决。然后CSS属性“transition”将起作用

在这里拉小提琴

#项目{
-webkit列数：3；
-webkit柱间隙：10px；
-moz列数：3；
-moz柱间距：10px；
列数：3；
柱间距：10px；
}
.项目{
-webkit过渡：宽度2s；
过渡：宽度2s；
宽度：100%；
高度：20px；
文本对齐：居中；
溢出：隐藏；
裕度：0 10px 0；
边框：1px纯黑；
}
.1 {
位置：绝对位置；
背景：红色；
}

1.
2.
3.
4.
4.
在CSS3中，不同位置（绝对位置和静态位置）之间的转换是不可能的，因此我尝试了一种jQuery解决方法：“可以通过在默认情况下使用static，然后附加一个具有绝对位置的类来解决。然后CSS属性“transition”将起作用

在这里拉小提琴

#项目{
-webkit列数：3；
-webkit柱间隙：10px；
-moz列数：3；
-moz柱间距：10px；
列数：3；
柱间距：10px；
}
.项目{
-webkit过渡：宽度2s；
过渡：宽度2s；
宽度：100%；
高度：20px；
文本对齐：居中；
溢出：隐藏；
裕度：0 10px 0；
边框：1px纯黑；
}
.1 {
位置：绝对位置；
背景：红色；
}

1.
2.
3.
4.
4.
我能找到的最佳解决方案是将新内容附加到另一个隐藏的div中，然后删除旧的div并显示新的div

您正面临这个问题，因为在将
div
更新为position absolute时，另一个
div
样式也在同时更新，因为它们是浮动的


$（函数（）{
$（“.item”）。每个（函数（）{
var项目=$（此项）；
var_text=items.text（）；
var_css=“宽度：”+items.width（）+“px”+
“高度：”+items.height（）+“px”+
“位置：绝对”+
“顶部：”+项目.offset（）.top+“px”+
“左：”+项目.offset（）.left+“px”+”
var_style=“style=”+_css+”；
var _div=“”+_text+”；
$（“#项目_克隆”）。追加（_div）；
});
$（“#项”）.remove（）；
$（“#items_clone”）.show（）.attr（“id”，“items”）；
}) ;
#项目{
-webkit列数：3；
-webkit柱间隙：10px；
-moz列数：3；
-moz柱间距：10px；
列数：3；
柱间距：10px；
}
#克隆项目{
显示：无；
}
.项目{
宽度：100%；
高度：20px；
文本对齐：居中；
溢出：隐藏；
裕度：0 10px 0；
边框：1px纯黑；
}

1.
2.
3.
4.
5.
我能找到的最佳解决方案是将新内容附加到另一个隐藏的div中，然后删除旧的div并显示新的div

您正面临这个问题，因为在将
div
更新为position absolute时，另一个
div
样式也在同时更新，因为它们是浮动的


$（函数（）{
$（“.item”）。每个（函数（）{
var项目=$（此项）；
var_text=items.text（）；
var_css=“宽度：”+items.width（）+“px”+
“高度：”+items.height（）+“px”+
“位置：绝对”+
“顶部：”+项目.offset（）.top+“px”+
“左：”+项目.offset（）.left+“px”+”
var_style=“style=”+_css+”；
var _div=“”+_text+”；
$（“#项目_克隆”）。追加（_div）；
});
$（“#项”）.remove（）；
$（“#items_clone”）.show（）.attr（“id”，“items”）；
}) ;
#项目{
-webkit列数：3；
-webkit柱间隙：10px；
-moz列数：3；
-moz柱间距：10px；
列数：3；
柱间距：10px；
}
#克隆项目{
显示：无；
}
.项目{
宽度：100%；
高度：20px；
文本对齐：居中；
溢出：隐藏；
裕度：0 10px 0；
边框：1px纯黑；
}

1.
2.
3.
4.
5.
如果使用
绝对值
，它将始终处于相同的位置！因为您循环每个项目，然后立即应用它，所以第一个div将更改为
绝对值
，并使用
左上方的值将其置于旧位置。然后第二个div仍不会更改为绝对值，因此它也将采用



$("#1").addClass('1');
$("#2").addClass('2');
$("#3").addClass('3');
$("#4").addClass('4');
$("#5").addClass('5');