Question

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

我设法将保证金设为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等）

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

在搜索功能

1 个答案: