0

我有一个不固定高度的 div #sampledogs。它显示来自 mysql 的记录（需要重新安置的狗）。我使用一些 jquery 使 div 与页面上的另一个 div 具有相同的高度。这是我遇到的问题：根据#sampledogs 的高度，它可以在底部显示部分记录（图像描述）

有什么方法我不能得到它，所以如果不能显示完整的记录，那么它不应该显示任何记录？

这是显示记录的#sampledogs div

<div id="sampledogs">
<?php
include 'inc/connect.php';
$q = mysqli_query($link, "SELECT filename, name, age, sex  FROM gallery WHERE gallery = 
                   1 ORDER BY RAND()") or die (mysql_error());
while($row = mysqli_fetch_array($q)){
   $data = $row['filename'];
   $file = substr($data, strpos($data, "/") + 1);
   echo"<div class='homedogs'>",
   "<img class='nailthumb-container' src='$file' alt='{$row['name']}. Image' />",
   'NAME: ',$row['name'],"<br />",'AGE: ',$row['age'],"<br />",'SEX: ',$row['sex'],
   "</div>";
}
?>
</div>

这是#sampledogs的CSS

#sampledogs{
width:200px;
min-height:900px;
text-align:center;
color:#a3a095;
position:absolute;
top:7%;
right:20px;
overflow:hidden;
}

呈现的 html

<div id="sampledogs">
<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/Purple Ribbon jpeg.JPG' 
alt='ribbbon. Image' />NAME: ribbbon<br />AGE: approx 4<br />SEX: female</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/web-design-sthelens.jpg' 
alt='jjjjjjjjjjjjjjjjj. Image' />NAME: jjjjjjjjjjjjjjjjj<br />AGE: kkkkkkkkkkkkkk
<br />SEX: kkkkkkkkkkkkkkkk</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/web-design-sthelens.jpg' 
alt='webdesign. Image' />NAME: webdesign<br />AGE: 3<br />SEX: male</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/pnglogo-blk.jpg' alt='pnglogo. 
Image' />NAME: pnglogo<br />AGE: 9999<br />SEX: male</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/pnglogo-blk.jpg' alt='purple. 
Image' />NAME: purple<br />AGE: 8<br />SEX: male</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/peacock-Laurence-Shan.jpg' 
alt='dude. Image' />NAME: dude<br />AGE: 7<br />SEX: female</div>

<div class='homedogs'><img class='nailthumb-container' src='images/gallery/logo-
1200x1200.png' alt='hhhhhhhhhhhhhhhhhhhhhhhhhhhhh. Image' />NAME: 
hhhhhhhhhhhhhhhhhhhhhhhhhhhhh<br />AGE: hhhhhhhhhhhhhhhh<br />SEX: 
hhhhhhhhhhhhhhhhhh</div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/peacock-Laurence-Shan.jpg' alt='. 
Image' />NAME: <br />AGE: <br />SEX: </div>

<div class='homedogs'>
<img class='nailthumb-container' src='images/gallery/web-design-sthelens.jpg' alt='web. 
Image' />NAME: web<br />AGE: 4<br />SEX: male</div>         
</div>

编辑：这是我正在尝试使用的 jquery

var neededHeight = $("#sampledogs").outerHeight(); //you can also use static value 
var totalChildHeight = 0;
$(".homedogs").children.each(function() {
totalChildHeight+= $(this).outerHeight(); //add up to the total height 
if(totalChildHeight> neededHeight) {  //compare if the height limit was exceeded
$(this).hide(); // if it did, hide the current element
$(this).nextAll().hide(); //hide all other list also
return false; // break the loop to stop the further iteration
}
});

我想做的事可能吗？

4

0 回答 0