jquery - Adding margin in search function -

my problem when using search function, pictures stuck because every 4th picture has no margin - because have fit div with, end of rows can't margin or padding. when search gives example 4th , 5th picture, together, because 4th, 8th , 12th picture don't have margin. every other picture have right margin 60px.

i managed margin 0 that:

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

definitely not best way, idea had how manage it.

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> 

and search function that:

$(document).ready(function(){    $("#filter").keyup(function(){      // retrieve input field text     var filter = $(this).val();      // loop through  list     $(".list li").each(function(){          // if list item not contain text phrase fade out         if ($(this).text().search(new regexp(filter, "i")) < 0) {             $(this).fadeout();          // show list item if phrase matches         } else {             $(this).show();         }      });     });  }); 

is there fast way add margin pictures end of row when searched?

edit:

added github link project: github

you can use :nth-child more effectively.

if know have 4 items per row..... :nth-child(4n) target every 4th item (4, 8, 12, 16, etc.)

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