Question

我希望以这样一种方式显示div的内容，使其仅显示最后3个列表，其余内容将被隐藏。

.wrapper {
height : 100px;
overflow:hidden;
}

<div class="wrapper">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Vestibulum eu ipsum at lectus rutrum interdum.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>bottom Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>bottom Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>bottom Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
  </ul>
</div>

我尝试应用height属性，但是它将应用于顶部内容而不是底部内容。

非常感谢。

Answer 1

您可以使用CSS来做到这一点。 nth-last-child(-n+3)将定位最后3个元素。

li{
  display:none
}

li:nth-last-child(-n+3) {
  display:list-item;
}

对于 divs ，您还可以使用相同的CSS进行少量调整。假设 父div 有一个主类

.main div{
  display:none;
}

.main div:nth-last-child(-n+3) {
  display:block;
}

工作代码

li {
  display: none
}

li:nth-last-child(-n+3) {
  display: list-item;
}

.main div {
  display: none;
}

.main div:nth-last-child(-n+3) {
  display: block;
}

<div class="wrapper">
  <ul>
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
    <li>Vestibulum eu ipsum at lectus rutrum interdum.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
    <li>Nulla ac dui eu velit semper vehicula.</li>
    <li>bottom Ut quis eros at tortor imperdiet viverra in a odio.</li>
    <li>bottom Morbi at erat non est dignissim suscipit quis nec nunc.</li>
    <li>bottom Etiam vitae velit lacinia, rutrum nulla eget, suscipit mauris.</li>
  </ul>
</div>



<div class='main'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>

</div>

Answer 2

用户CSS选择-

 li:nth-last-child(-n+3) {
display:none;
}

Answer 3

您可以隐藏除最后3个元素之外的所有li元素：

$(".wrapper ul li").slice(0, -3).hide();

Answer 4

在页面底部使用此脚本：

var len =$('.wrapper li').length -3;
$(".wrapper li:lt("+len+")").hide();

Answer 5

根据您在注释部分的要求，我认为您可能想做这样的事情。

在此代码中，当用户单击文本框时，它将仅显示底部的3个div元素，其余元素将被隐藏。

这是JS函数和HTML代码。希望这会有所帮助。

function myFunction() {
    var div_count = document.getElementsByTagName("div").length; 
    for (var i = 0; i <= div_count; i++) {
        var x = document.getElementById("div" + i);

        if (i < div_count - 4) {
            x.style.display = 'none';
        }
    }
}

<head>
<body>
    <div class="main">
        <div id="div0">
            This is my 1st div element.
        </div>
        <div id="div1">
            This is my 2nd div element.
        </div>
        <div id="div2">
            This is my 3rd div element.
        </div>
        <div id="div3">
            This is my 4th div element.
        </div>
        <div id="div4">
            This is my 5th div element.
        </div>
        <div id="div5">
            This is my 6th div element.
        </div>
        <div id="div6">
            This is my 7th div element.
        </div>
        <div id="div7">
            This is my 8th div element.
        </div>
    </div>
    <input type="text" value="" onClick="myFunction();" id="textbox1">
    <script src="test.js"></script>
</body>
</head>

如何从底部显示Div的某些内容？

5 个答案: