【问题标题】：Count and display most recent blog posts in javascript计数并显示 javascript 中的最新博客文章
【发布时间】：2019-02-18 08:00:44
【问题描述】：

为了只按顺序显示帖子 3 和 4 的 javascript 是什么？我还需要它是动态的，所以如果我发布第 5 个帖子，它只会显示第 4 和第 5 个帖子......我在考虑日期函数或简单增量器之类的东西，但似乎无法弄清楚。我是 javascript 新手，一直在尝试不同的东西，但无济于事......提前致谢......

 <!DOCTYPE html>
<html>
<body>

<div id="posts-div">
    <h1 class="post-title">post4</h1>
    <p class="post">post4</p>
</div>

<div id="posts-div">
    <h1 class="post-title">post3</h1>
    <p class="post">post3</p>
</div>

<div id="posts-div">
    <h1 class="post-title">post2</h1>
    <p class="post">post2</p>
</div>

<div id="posts-div">
    <h1 class="post-title">post1</h1>
    <p class="post">post1</p>
</div>

<script>
// ???
</script>

</body>
</html>

【问题讨论】：

您可能想要更改您的代码：您列出了具有相同 ID 的不同元素，这是无效的。您可能想改用一个类。
be dynamic so if I put a 5th post ：把它放在？，你能把你以前试过的任何代码放上去吗？你是用 JQuery 还是纯 js？
另外，如果你在另一个 div 中组织你的 div 可能是个好主意，这一次用一个 id 标识。然后您可以使用 appendChild() 添加新帖子，并且可以使用 MutationObserver 检测容器和子 div 中的任何更改。但是，既然您可以管理每次添加帖子时可见的元素，为什么还要使用 MutationObserver 使您的生活变得复杂呢？

标签： javascript html sorting dynamic-html

【解决方案1】：

你不需要脚本。你可以用 CSS 来做到这一点。我已经改变了你的 html 一点点（在 html 中制作了 post-div 类）。

.posts-div{
  display:none;
}
.posts-div:nth-child(-n+2) {
   display:block;
}

<!DOCTYPE html>
<html>
<body>
  <div class="posts-div">
      <h1 class="post-title">post5</h1>
      <p class="post">post5</p>
  </div>
  <div class="posts-div">
      <h1 class="post-title">post4</h1>
      <p class="post">post4</p>
  </div>

  <div class="posts-div">
      <h1 class="post-title">post3</h1>
      <p class="post">post3</p>
  </div>

  <div class="posts-div">
      <h1 class="post-title">post2</h1>
      <p class="post">post2</p>
  </div>

  <div class="posts-div">
      <h1 class="post-title">post1</h1>
      <p class="post">post1</p>
  </div>

<script>
// ???
</script>

</body>
</html>

你也可以在 JSfiddle 上测试它。https://jsfiddle.net/nimittshah/b5eL3ykx/6/

【讨论】：

【解决方案2】：

$('.posts-div:gt(1)').hide()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>

<div class="posts-div">
    <h1 class="post-title">post4</h1>
    <p class="post">post4</p>
</div>

<div class="posts-div">
    <h1 class="post-title">post3</h1>
    <p class="post">post3</p>
</div>

<div class="posts-div">
    <h1 class="post-title">post2</h1>
    <p class="post">post2</p>
</div>

<div class="posts-div">
    <h1 class="post-title">post1</h1>
    <p class="post">post1</p>
</div>

</body>

【讨论】：

【解决方案3】：

试试这个：

<script>
document.addEventListener("DOMContentLoaded", function () {
    var allPosts = document.querySelectorAll(".posts-div");
    // This is the number of posts you want displayed
    var numberOfPostsToShow = 2;

    for (var i = 0; i < allPosts.length; i++) {

       if(i > numberOfPostsToShow - 1) {
           allPosts[i].style.display = "none";
       }

    }
});
</script>

这样，您将使用 numberOfPostsToShow 变量选择要显示的帖子数。

让我知道这是否有效。问候。

【讨论】：

【解决方案4】：

按照我解释您问题的方式，您需要一种方法：

仅显示前 n 个元素；
动态地将新元素添加到帖子列表的顶部；
当您添加它们时，更新可见元素。

假设您的代码有一个稍微修改过的版本，它更正了 id/class 问题并为所有帖子添加了一个容器（这次使用正确的 id）：

<!DOCTYPE html>
<html>
<body>

    <div id="posts-container">
        <div class="posts-div">
            <h1 class="post-title">post4</h1>
            <p class="post">post4</p>
        </div>

        <div class="posts-div">
            <h1 class="post-title">post3</h1>
            <p class="post">post3</p>
        </div>

        <div class="posts-div">
            <h1 class="post-title">post2</h1>
            <p class="post">post2</p>
        </div>

        <div class="posts-div">
            <h1 class="post-title">post1</h1>
            <p class="post">post1</p>
        </div>
    </div>

<script>
// ???
</script>

</body>
</html>

此代码可以解决问题并管理帖子可见性的添加和更新：

function showOnly(visible, query){
    var elements = document.querySelectorAll(query);
    for (var i = 0; i < elements.length; i++){
        if (i < visible - 1){
            elements[i].style.display = 'block';
        } else {
            elements[i].style.display = 'none';
        }
    }
}

function publishPost(element, visible){
    showOnly(visible, '#posts-container .posts-div')
    var elements = document.querySelectorAll('#posts-container .posts-div');
    element.style.display = 'block';
    if (elements.length > 0) {
        document.querySelector('#posts-container').insertBefore(element, elements[0]);
    } else {
        document.querySelector('#posts-container').appendChild(element);
    }
}

showOnly 函数（使用要显示的元素数量和使用 querySelectorAll 标识元素的字符串调用）只会使字符串标识的前 n 个元素可见。如果需要，您可以独立于其余代码使用它。

另一方面，publishPost 函数严格依赖于上面修改后的 html（要在其他地方使用它，您需要调整提供给 querySelector 和 querySelectorAll 的字符串）。它将要发布的元素作为第一个参数，需要可见的元素数量作为第二个参数。然后它会更新在新帖子之前的帖子列表，它还会更新哪些帖子是可见的。

这是一个使用它的代码示例：

var elDiv = document.createElement('div');
var elH1 = document.createElement('h1');
var elP = document.createElement('p');
elDiv.classList = 'posts-div';
elH1.classList = 'post-title';
elP.classList = 'post';
elH1.innerText = 'some title';
elP.innerText = 'some text for the post';
elDiv.appendChild(elH1).appendChild(elP);
publishPost(elDiv, 2);

仅显示

此函数首先获取必须管理其可见性的元素列表：

var elements = document.querySelectorAll(query);

然后它遍历列表并检查每个元素：

for (var i = 0; i < elements.length; i++){

如果它必须是可见的，它会将 style.display 属性设置为 'block'：

if (i < visible){
    elements[i].style.display = 'block';

否则将其设置为“隐藏”：

else {
    elements[i].style.display = 'none';

发布帖子

这个函数一开始只显示 n-1 个元素（因为它需要在列表顶部添加一个新的可见元素）：

showOnly(visible - 1, '#posts-container .posts-div')

然后它会检索当前的帖子：

var elements = document.querySelector('#posts-container .posts-div');

它使新元素可见：

element.style.display = 'block';

最后，它将元素添加到列表的顶部（不同的语法取决于列表是否为空）：

if (elements.length > 0) {
    document.querySelector('#posts-container').insertBefore(element, elements[0]);
} else {
    document.querySelector('#posts-container').appendChild(element);
}

【讨论】：