jquery - 在搜索功能中添加边距

Question

我的问题是，当使用搜索功能时，图片会卡在一起，因为每 4 张图片都没有边距 - 所有这些都是因为它们必须适合特定的 div，所以行尾不能有任何边距或填充。但是当搜索给出例如第 4 和第 5 张图片时，它们是在一起的，因为第 4、第 8 和第 12 张图片没有边距。其他每张图片都有 60px 的右边距。

我设法使 margin 为 0:

     li:nth-child(4) {
         margin-right: 0px;
      }

     li:nth-child(8) {
         margin-right: 0px;
      }
     li:nth-child(12) {
         margin-right: 0px;
      } 

绝对不是最好的方法，但当时我只是知道如何管理它。

HTML:

 <header class="main-header">

   <form id="live-search" class="styled" method="post">
     <fieldset>
        <input type="text" class="text-input input"      placeholder="Search.." id="filter" value="" />
     </fieldset>
  </form>
</header>
<div class="container">
        <ul class="list" id="imageGallery">
            <li>
                <a href="photos/01.jpg" data-lightbox="image-1" data-title="Title">
                <img src="photos/thumbnails/01.jpg" alt="Text">
                </a>
                <p>Title text</p>
            </li>
           ........
      </ul>
    </div>

搜索功能是这样的:

$(document).ready(function(){
   $("#filter").keyup(function(){

    // Retrieve the input field text
    var filter = $(this).val();

    // Loop through the  list
    $(".list li").each(function(){

        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).fadeOut();

        // Show the list item if the phrase matches
        } else {
            $(this).show();
        }
     });

   }); 
});

有什么快速的方法可以在搜索时为行尾的图片添加边距吗？

编辑:

在元素中添加了 Github 链接: Github

Answer 1

您可以更有效地使用 :nth-child。

如果您知道每行有 4 个元素..... :nth-child(4n) 将定位每第 4 个元素(4、8、12、16 等)

.container {
  margin: 20px auto;
  max-width: 400px;
  font-size: 0.7em;
}

ul {
    list-style: none;
    margin:0;
    padding:0; }

li {
  margin-bottom: .25em;
  padding: .25em;
  background: #eee;
  text-transform: uppercase;
}

li:nth-child(4n) {
  background: #aae;
  color: #fff;
  font-weight: bold;
}

<div class="container">
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li>List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
    <li>List Item 6</li>
    <li>List Item 7</li>
    <li>List Item 8</li>
    <li>List Item 9</li>
    <li>List Item 10</li>
    <li>List Item 11</li>
    <li>List Item 12</li>
  </ul>
</div>