javascript - 搜索后如何重新排列过滤的卡片？

Question

搜索“卡二”后，我希望结果重新对齐以从结果部分的开头显示。

此外，我找不到任何有关如何对卡片进行分页的文档...我只是想澄清一下对卡片进行分页。我可以找到有关如何对表格进行分页的文档。卡片上的卡片未使用卡片类别。

我尝试使用卡片组类而不是卡片 block 类。这是代码笔:https://codepen.io/dnorton94/pen/NWKGagz

<!-- search bar -->
<div class="container">
  <div class="row">
    <div class="col-sm-12 mb-3">
      <input type="text" id="myFilter" class="form-control" onkeyup="myFunction()" placeholder="Search by MBTI personality type..">
    </div>
  </div>
<!-- results -->
<div class="container">
  <div class="row" id="myItems">
    <!-- card one -->
    <div class="col-sm-3">
      <div class="card">
        <div class="card-block">
          <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
            <h5 class="card-title">Card one</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
         </div>
      </div>
    </div>
    <!-- card two -->
    <div class="col-sm-3">
      <div class="card">
        <div class="card-block">
          <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
            <h5 class="card-title">Card two</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
         </div>
      </div>
    </div>
    <!-- card three -->
    <div class="col-sm-3">
      <div class="card">
        <div class="card-block">
          <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
            <h5 class="card-title">Card three</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
         </div>
      </div>
    </div>
    <!-- card four -->
    <div class="col-sm-3">
      <div class="card">
        <div class="card-block">
          <img class="card-img-top img-fluid" src="//placehold.it/500x200" alt="Card image cap">
            <h5 class="card-title">Card four</h5>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
         </div>
      </div>
    </div> 

    var input, filter, cards, cardContainer, h5, title, i;
    input = document.getElementById("myFilter");
    filter = input.value.toUpperCase();
    cardContainer = document.getElementById("myItems");
    cards = cardContainer.getElementsByClassName("card");
    for (i = 0; i < cards.length; i++) {
        title = cards[i].querySelector(".card-block h5.card-title");
        if (title.innerText.toUpperCase().indexOf(filter) > -1) {
            cards[i].style.display = "";
        } else {
            cards[i].style.display = "none";
        }
    }
}

.row {
   display: flex;
   flex-wrap: wrap;
}

我希望在输入“卡二”后，结果会重新格式化，并且卡二会取代卡二的初始位置。

分页...我想在一页上显示 12 张卡片，然后在下一页上显示 12 张卡片，依此类推

Answer 1

您必须选择父元素，如下所示

if (title.innerText.toUpperCase().indexOf(filter) > -1) {
    cards[i].parentElement.style.display = "flex"
} else {
    cards[i].parentElement.style.display = "none"
}