javascript - divの要素を検索

Question

div複数の画像を含む検索バーを作成しようとしています。検索は機能していますが、検索に合わない要素が非表示になっている場合は、要素間にスペースがあります。私がしたいのは、残りの要素を隣り合わせに再配置することです。私はこれまでに持っているものを示すためにjsFiddleを作成しました。検索フィールドに「a」または「b」と入力してみてください。意味がわかります。

助けてくれてありがとう。

Answer 1

display: noneの代わりに使用してくださいvisibility: hidden。

---

• display: noneDOMから要素を削除します。例：

  .cheshire_cat {
      display: none;
  }
  

  そこになかったかのように、要素は完全になくなります。

• visibility: hidden要素が完全に透明であるかのように機能します。例：

  .ninja {
      color: black;
      visibility: hidden;
  }
  

  要素は同じ位置にあり、同じスペースを占めますが、表示することはできません。

Answer 2

これを変える

objects[i].style.visibility = 'hidden';

これに

objects[i].style.display = 'none';

もう一度画像を表示します

objects[i].style.display = '';