php mysql bootstrap行按钮/div高度

Question

我在获得相同高度时遇到问题。

我使用 php mysql 生成 n 行引导网格，每行 6 个项目(按钮/div)。

我希望行中的每个项目(按钮/div)具有相同的高度。

我没有成功，当我在下面添加 jquery 代码时，它会展平我的项目(按钮/div)。

<form action="index.php" method="get">

<?php

while ($row = @mysqli_fetch_assoc($result)){
echo "<div class=\"row\">";
$item = 2;
foreach ($result as $resulty) { 
echo "<div class=\"col-xs-2 col-sm-2 col-md-2 col-lg-2 buttonMus\">";
echo "<img src=\"directory/".$resulty['foo'].".png\">";
?>
<input type="checkbox"  class="single-checkbox" name="Mus[]" 
value="<?php echo addslashes($resulty['musloc']); ?>" />
<?php
echo $resulty['musloc']. ' ';
echo "<br>";
echo "</div>"; // for xs
if($item % 5 == 1) { // i.e. Count is divisible by 5
echo "</div>"; // for row
echo "<div class=\"row\">"; 
} // if item
$item++;

} //for each
echo "</div>";
} // while

?>
<input type="submit" name="submit"    value="Submit">
</form>
<?php

我尝试将此 jquery 代码放在 php 的顶部和底部，但这两个位置都使项目(div/按钮)变平

<script>
$(document).ready(function() {
var maxHeight = -1;

$('.buttonMus').each(function() {
 maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
});

$('.buttonMus').each(function() {
 $(this).height(maxHeight);
});
});

</script>

谁能帮忙解决一下这个问题吗？

任何评论或回答将不胜感激。提前致谢。

Answer 1

请检查此代码

$(document).ready(function(e) {
   var itemArray    =   $(".row").find(".buttonMus");
   if(itemArray.length>0){
     var maxHeight  =   $(itemArray[0]).height();
     for(var i=0;i<itemArray.length;i++){
        if(maxHeight<$(itemArray[i]).height()){
            maxHeight   =   $(itemArray[i]).height();
        }
     }
     $(".buttonMus").height(maxHeight);
   }
});

或者你可以使用这个匹配高度插件 https://github.com/liabru/jquery-match-height