隐藏id大于$number的行 - Hide rows with id greater than $number

Hide rows with id greater than $number

本文关键字：number 的行大于 id 隐藏 | 更新日期: 2023-09-27

我有一个php变量，并希望通过css隐藏大于$number的所有行。如。数量= 12美元;

<style>
#row<?php echo $number?>{
display: none;
}
</style>

这将只隐藏一行12。我想隐藏所有大于12的行

有什么建议吗?

添加一个循环，并自动将代码写入页面....

<?php
for ($i = $number; $i <= 100; $i++) {
    echo '#row'.$i.' {display: none;}';
}
?>

在上面的代码中，我们从$number(例如，12)开始，一直到100。我们循环12到100之间的每个数字，并写出我们的"隐藏"代码。

上面的代码示例将返回如下内容:

#row12 {display: none;}
#row13 {display: none;}
#row14 {display: none;}
#row15 {display: none;}

另外，如果你想把它直接放在你的页面中，它可能看起来像这样:

<?php
echo '<style>';
for ($i = $number; $i <= 100; $i++) {
  echo '#row'.$i.' {display: none;}';
}
echo '</style>';
?>

要做到这一点，你需要一个父div和一个支持:nth-child的浏览器

HTML

<div class="data">
    <div class="row">row1</div>
    <div class="row">row2</div>
    <div class="row">row3</div>
    <div class="row">row4</div>
    <div class="row">row5</div>
    <div class="row">row6</div>
    <div class="row">row7</div>
    <div class="row">row8</div>
    <div class="row">row9</div>    
    <div class="row">row10</div>
    <div class="row">row11</div>
    <div class="row">row12</div>       
    <div class="row">row13</div>
    <div class="row">row14</div>
    <div class="row">row15</div>       
</div>

CSS

.data div:nth-child(n+12) {
   display: none;
}

参见demo http://jsfiddle.net/PY5Fe/101/

用类标记最后一个可见行-例如finalRow -并使用CSS的一般兄弟选择器~:

~组合符分隔两个选择器，只有当第二个选择器前面有第一个元素，并且两个选择器有共同的父元素时，才匹配第二个选择器。

隐藏它后面的所有行(本例假设每行都是div;当然，根据需要修改):

<style>
  .finalRow ~ div {
    display: none;
  }
</style>

见http://jsfiddle.net/dh7Lp8vk/。这种方法的一个好处是，您可以让客户端Javascript根据需要移动finalRow类。