jquery - 在页面加载时循环调整 div 的 css

Question

我有一个循环输出一堆带有砖石的盒子，其中包含帖子摘录。

<div class="box">
  <div class="image">
     <img src="" />
  </div>
  <div class="info">
      <h3>//title output with php</h3>
  </div>
</div>

.image {
   position:relative;
   width:200px;
   height:200px;
   z-index:100;
}
.box:hover .image {
   margin-top:-30px;
}
.info {
   position:absolute;
   bottom:0;
   width:100%;
   z-index:99;
}

好的，我这里有一个包含帖子拇指的 div，然后是我隐藏在它下面的包含标题的 div。为了显示标题，我给出.image了一个负的上边距，但我的问题是.info高度不同。所以我需要.info在页面加载时用 jquery 抓取每个的高度，然后用它来设置margin-top每个对应的负数.image。

像这样的东西，但显然这是不对的。

 function pageLoad() {
   var height = $(".info").height();
   $(".box:hover .image").css("margin-top", height );
 }

那么如何为循环中的每个单独的框执行此操作？

Answer 1

这可能是您正在寻找的。

$(document).ready(function () {
    $('.box').each(function () {
         var height = $(this).children('.info').height();
         $(this).children('.image').css('margin-top', height);
    });
});

我之前没有看到悬停部分，也许你看起来更像这样：

$(document).ready(function () {
    $('.box').hover(function () {
        var height = $(this).children('.info').height();
        $(this).children('.image').css('margin-top', height);
    });
});