javascript - 使用 jQuery 输出彼此相邻的同级 div

Question

我正在尝试创建彼此相邻的缩略图，但它不起作用。它似乎是在彼此之上输出它们。我希望它们相距 5 像素。

--- 我需要绝对定位。我需要它，以便在我将它们全部放在一起之后，我希望被点击的那个变大，所有左边的都应该向左消失，所有右边的都应该向右消失。需要绝对定位，以便我可以控制它。

HTML

<div class="portItem">
    <div class="itemContent-wrap">
        <div class="itemContent">
            <div class="container">
                <div class="thumbWrap">
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                    <div class="thumb"></div>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.thumb {
  height: 200px;
  width: 450px;
  position: absolute;
  display: inline-block;
  background: #D0E182;
  margin-top: 25px;
  margin-right: 5px;
  transition: all 1s ease-in-out;
  top: 0;
  left: 0;
}

Javascript

$(document).ready(function(){ 
    $('.portItem').each(function() {
        $('.thumb', this).each(function(i) {
              $('.thumb').css('left',40*i);
         }).appendTo('.body');
     });
});

fiddle :http://jsfiddle.net/nTHDk/11/

解决方案!:http://jsfiddle.net/nTHDk/14/

提前致谢!

Answer 1

你的代码中有很多错别字:

看这个updated Fiddle

1. 您没有将 Jquery 添加到您的 fiddle 中。
2. 在 fiddle 中你不需要写document.ready
3. 对于每个选择使用 $(this).css('left',40*i +"px");//注意 this 和 px
4. 您的盒子尺寸太大而无法注意到移动，我缩小了它们。
5. 我删除了 appendTo，这些元素已经位于您的 DOM 中(您要移动它们吗？)
6. 如果您想使用 appenedTo 函数，请将选择器固定为 $('body')