使用 JavaScript 和 PHP 的每个类的列高

Question

我的脚本中有以下代码来设置每列的最大高度。 但是，我打算为所有 4 列每行单独设置最大高度。 目前它不会执行每个类的函数。

这是 JavaScript：

<script type="text/javascript" >
$(document).ready(function() {

<?php
$test = $cart->count_contents();
for ($i=0, $n=$test; $i<$n; $i++) {
?>
setHeight('.<?php echo 'col'.$i; ?>');
<?php
  }
?>

});


 //Initialize the global variable, this will store the highest height value
var maxHeight = 0;


function setHeight(col) {



//Get all the element with class = col
col = $(col);

//Loop all the col
col.each(function() {

//Store the highest value
if($(this).height() > maxHeight) {
maxHeight = $(this).height();;
}
});

//Set the height
col.height(maxHeight);
}
</script>

我使用 PHP 从 MySQL 数据库中提取每一行并生成以下 HTML：

<div class="ui-grid-c ui-bar ui-bar-e">
<div class="ui-block-a"><div class="ui-bar ui-bar-b" style="height: 20px;">Remove</div></div>

<div class="ui-block-b"><div class="ui-bar ui-bar-b" style="height: 20px;">Product(s)</div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-b" style="height: 20px;">Qty.</div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-b" style="height: 20px;">Total</div></div>

<div class="ui-block-a"><div class="ui-bar ui-bar-c col0"><input type="checkbox" name="somename1" value="somevalue1"></div></div>



<div class="ui-block-b"><div class="ui-bar ui-bar-c col0"><a href="#"><img src="images/someimage1.gif" border="0" alt="sometitle1" title="sometitle1" width="100" height="80"></a>
<a href="#"><b>sometitle1</b></a><br><small><i - >somecontent</i></small><br><small><i> - somecontent</i></small><br><small><i> - somecontent</i></small></div></div>

<div class="ui-block-c"><div class="ui-bar ui-bar-c col0"><input type="text" name="somename1" value="1" size="4"></div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-c col0"><b>sometext1</b></div></div>


<div class="ui-block-a"><div class="ui-bar ui-bar-c col1"><input type="checkbox" name="somename2" value="somevalue2"></div></div>



<div class="ui-block-b"><div class="ui-bar ui-bar-c col1"><a href="#"><img src="images/someimage2.gif" border="0" alt="sometitle2" title="sometitle2" width="100" height="80"></a><a href="#"><b>sometitle2</b></a></div></div>
<div class="ui-block-c"><div class="ui-bar ui-bar-c col1"><input type="text" name="somename2" value="1" size="4"></div></div>
<div class="ui-block-d"><div class="ui-bar ui-bar-c col1"><b>sometext1</b></div></div>


</div><!-- /grid-a -->

Answer 1

问题不是回答自己的正确位置，我将复制您的解决方案

您只需将：更改

 //Initialize the global variable, this will store the highest height value
var maxHeight = 0;


function setHeight(col) {
// etc etc etc

为：

function setHeight(col) {
 var maxHeight = 0;
 //etc etc etc

Answer 2

我只需要将： 更改

 //Initialize the global variable, this will store the highest height value
var maxHeight = 0;


function setHeight(col) {
// etc etc etc

为：

function setHeight(col) {
 var maxHeight = 0;
 //etc etc etc