Question

我正在尝试创建一个简单的jQuery函数，该函数应该根据“.master”高度设置一些div的高度，这对于文档中可以找到的所有“.row”，如下所示： / p>

<div class="row">
   <div class="master">
      (height: 200px)
   </div>
   <div class="slave">
      (should be set to 200px)
   </div>
</div>
<div class="row">
   <div class="slave">
      (should be set to 50px)
   </div>
   <div class="master">
      (height: 50px)
   </div>
   <div class="slave">
      (should be set to 50px)
   </div>
</div>

我试过的是：

$(document).ready(function(){
    $(".szs-row").each(function() {
        $(this + '.szs-slave').height($(this + ".szs-master").height());
    });
});

我知道它可以更简单地完成（比如纯CSS），但我需要一个JS解决方案......

Answer 1

如果您有浮动元素，则需要使用名为clearfix的经典黑客清除父元素。

http://nicolasgallagher.com/micro-clearfix-hack/

演示：codepen.io/anon/pen/tlicz

第一个例子是使用clearfix，第二个例子应该是你遇到的问题，并试图用JS解决。

Answer 2

你去。

$(document).ready(function(){
    $(".row").each(function() {
        var masterHeight = $(this).find('.master').height();
        $(this).find('.slave').height(masterHeight);   
    });
});

这是小提琴 http://jsfiddle.net/PcL8k/

Answer 3

您可以使用CSS表格布局属性：

.row {
  display: table-row;
}

.row > div {
  display: table-cell;
}

.row > div.master {
  height: 200px; /* for example */
}

jQuery div在行内的高度相同

3 个答案: