javascript - 每个功能都没有按预期工作

Question

所以我尝试做的是以下内容:

我得到了 3 列中的一些元素和默认定位 (position:static)。
我正在尝试将它们转换到top:0; left:0 页面。

---

不同位置之间的转换( absolute 和 static)在 CSS3 中是不可能的，所以我尝试了一个 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
  });
});

这应该做的是，获取每个类为 item 的元素，并使用 position:absolute
在现有位置“复制”它非常适合一件商品。但是一旦我得到多个元素，它只是将它们堆叠在第一个元素的位置......

---

这是一个 fiddle :

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

#items{
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}
.item{
    width:100%;
    height:20px;
    text-align:center;
    overflow:hidden;
    margin:0 0 10px 0;
    border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">4</div>
</div>

我想要的结果是 jQuery 获取每个元素，获取它在页面上的位置，并替换 CSS，所以它与以前的位置相同，只是使用 position:absolute，所以我可以之后将其转换为 top:0;left:0;。

Answer 1

如果您使用 absolute ，它将始终保持相同的位置!因为您循环每个元素然后立即应用它，所以第一个 div 更改为 absolute 并使用 top,left 值将其置于旧位置。然后第二个 div 仍未更改为绝对值所以它也将占据 first div 位置并与 first div 重复。这将持续发生直到循环结束。所以它们都将具有相同的 top,left 值。

所以我的解决方案不是立即应用 css 属性，将值存储在一个辅助对象中并在完成循环后应用所有属性。

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

for(var j in beforeApply) {
     var index = parseInt(j) + 1;
     var text = beforeApply[j].text;
    $("#items div:nth-child("+index+")").css(beforeApply[j]).text(text + "Changed position");
}

#items{
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
}
.item{
    width:100%;
    height:20px;
    text-align:center;
    overflow:hidden;
    margin:0 0 10px 0;
    border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="items">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">4</div>
</div>