jquery - 找到最高列的最低位置

Question

对我所知道的道歉应该是一个简单的问题！我已经完全冻结脑筋，我的搜索结果让我更加困惑。

我正试图获得三列的下边缘，并想要计算哪个是最低的（距离顶部最远）。为什么我没有得到正确的值 - 如何将它们放入能够返回所需'底部'的东西？

欢迎所有建议。

function colBottoms( bottom ) {
		bottom = 0;
		$( '.column' ).each( function() {
		  var lastP = $( this ).find( 'p' ).last();
    $( lastP ).css( 'color', 'green' );
			var off = $( lastP ).offset();
			var top = off.top;
    $( lastP ).append( top );
			var height = $(  lastP ).height();
    $( lastP ).append( " My 'height' is " + height );
			bottom = top + height;
		console.log( $(  this ).attr( 'id' ) + ' ends at ' + bottom + 'px' );
		});
	}
	colBottoms();

#first, #second, #third {
  width: 25%;
  display: block;
  float: left;
  padding: 10px;
}
#first {
  background: yellow;
}
#first p {
  padding: 15px 10px;
}
#second {
  background: lightblue;
}
#second p {
  padding: 0 10px;
}
#third {
  background: pink;
}
#third p {
  line-height: 50px;
}

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

<div id="first" class="column">
  <p>Some content here</p>
  <p>My 'top' is </p>
</div>

<div id="second" class="column">
  <p>Some more content here</p>
  <p>My 'top' is </p>
</div>

<div id="third" class="column">
  <p>My 'top' is </p>
</div>

Answer 1

以下是一个解决方案，您只需创建一个以0作为值的变量，然后循环浏览.column，如果 outerHeight ，则替换该值colum + top offset 大于变量（这意味着如果列长于前一列，它将被替换。

在这里使用outerHeight是因为你想要包括填充在内的整个高度。

＆＃13;

＆＃13;

var farFromTop = 0
$('.column').each(function() {
var bottomEnds = $(this).offset().top + $(this).outerHeight()
console.log($(this).attr('id') + " is at : " + bottomEnds)
  if(bottomEnds > farFromTop){
  	farFromTop = bottomEnds
  }
})

console.log("longest column ends at " + farFromTop);

＆＃13;

#first, #second, #third {
  width: 25%;
  display: block;
  float: left;
  padding: 10px;
}
#first {
  background: yellow;
}
#first p {
  padding: 15px 10px;
}
#second {
  background: lightblue;
}
#second p {
  padding: 0 10px;
}
#third {
  background: pink;
}
#third p {
  line-height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first" class="column">
  <p>Some content here</p>
  <p>My 'top' is </p>
</div>

<div id="second" class="column">
  <p>Some more content here</p>
  <p>My 'top' is </p>
</div>

<div id="third" class="column">
  <p>My 'top' is </p>
</div>

＆＃13;

＆＃13;

＆＃13;