jquery — php mysql кнопка запуска строк / высота div

У меня проблемы с получением равных высот.

Я использую php mysql, чтобы сгенерировать n рядов сетки начальной загрузки, 6 элементов (кнопок / делений) на строку.

Мне бы хотелось, чтобы каждый элемент (кнопки / деления) в строке был одинаковой высоты.

У меня нет успеха, когда я добавляю код jquery ниже, он выравнивает мои элементы (кнопки / деления).

<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, но в обоих местах он выравнивает элементы (divs / button)

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

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

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

</script>

Может ли кто-нибудь помочь решить эту проблему.

Любой комментарий или ответ оценят. Заранее спасибо.

0

Решение

пожалуйста, проверьте этот код

$(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

0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]