jquery - 隐藏范围之间的增量值

Question

因此采用以下 HTML:-

<div id="news-archive">
    <div id="blog-1" class="blog-wrapper">some content</div>
    <div id="blog-2" class="blog-wrapper">some content</div>
    <div id="blog-3" class="blog-wrapper">some content</div>
    <div id="blog-4" class="blog-wrapper">some content</div>
    <!-- and so on -->
</div>

假设博客增量持续到 150。

CSS 是否可以仅显示前 6 个 div，即 #blog-1 到 #blog-6，然后隐藏其余部分，或者这是一个jQuery 工作？

Answer 1

您可以使用 nth-child 选择器在 CSS 中实现此目的:

#news-archive div {
    display: none;
}
#news-archive div:nth-child(-n+6) {
    display: block;
}

#news-archive div {
    display: none;
}
#news-archive div:nth-child(-n+6) {
    display: block;
}

<div id="news-archive">
    <div id="blog-1" class="blog-wrapper">some content 1</div>
    <div id="blog-2" class="blog-wrapper">some content 2</div>
    <div id="blog-3" class="blog-wrapper">some content 3</div>
    <div id="blog-4" class="blog-wrapper">some content 4</div>
    <div id="blog-5" class="blog-wrapper">some content 5</div>
    <div id="blog-6" class="blog-wrapper">some content 6</div>
    <div id="blog-7" class="blog-wrapper">some content 7</div>
    <div id="blog-8" class="blog-wrapper">some content 8</div>
    <div id="blog-9" class="blog-wrapper">some content 9</div>
    <div id="blog-10" class="blog-wrapper">some content 10</div>
    <div id="blog-11" class="blog-wrapper">some content 11</div>
    <div id="blog-12" class="blog-wrapper">some content 12</div>
</div>

但是，使用 AJAX 仅加载所需的元素可能是值得的，因为在页面上加载 140 多个永远不会使用的元素会影响性能，但不会带来任何好处。