Filter items and rearrange odd nth-child

Question

I have a filter for a list which works fine. When I click on a button the right list-items are showed. My list items are styled by css with :nth-child(odd), so every second list-item is getting a background. This also works fine so far. What doesn't work right is the nth-child selector for every odd item. For example, when I click on the third button I the background style is wrong.

I've already tried to remove the class striped-background and add it to all visible items, but this doesn't work so far. I feel that the nth-child selector is only working when the DOM is fully reloaded.

Any ideas how I can make this work?

$(document).ready(function () {
  $("button[data-filter]").click(function (e) {
    $("button[data-filter]").removeClass('active-filter');
    $(this).addClass('active-filter');
    $('li.element-item').fadeOut(150);
    var filterClass = $(this).attr("data-filter");
    var elements = $('li.element-item');
    //elements.removeClass('striped-background');

    if (filterClass == '*') {
      $(elements).fadeIn(450);
      //elements.addClass('striped-background');
    } else {
      $('li.element-item'+filterClass).fadeIn(450);
      $(elements).not($('li.element-item'+filterClass)).hide();
    }
    $(this).ready(function() {
      //$('li.element-item:visible').addClass('striped-background');
    });
  });
});

.striped-background:nth-child(odd) {
  background: #bcd5fa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section class="filters-button-group">
  <button class="button is-checked" data-filter="*">All</button>
  <button data-filter=".344" class="button">First</button>
  <button data-filter=".345" class="button">Second</button>
  <button data-filter=".348" class="button">Third</button>
  <button data-filter=".374" class="button">Fourth</button>
  <button data-filter=".375" class="button">Fifth</button>
</section>

<ul class="download schlauBuch">
  <li class="element-item active 344 striped-background">
    <p class="first">
      First
    </p>
  </li>
  <li class="element-item active 344 striped-background">
    <p class="first">
      First 2
    </p>
  </li>
  <li class="element-item active 345 striped-background">
    <p class="first">
      Second
    </p>
  </li>
  <li class="element-item active 348 striped-background">
    <p class="first">
      Third
    </p>
  </li>
  <li class="element-item active 348 striped-background">
    <p class="first">
      Third 2
    </p>
  </li>
  <li class="element-item active 348 striped-background">
    <p class="first">
      Third 3
    </p>
  </li>
  <li class="element-item active 348 striped-background">
    <p class="first">
      Third 4
    </p>
  </li>
  <li class="element-item active 348 striped-background">
    <p class="first">
      Third 5
    </p>
  </li>
  <li class="element-item active 374 striped-background">
    <p class="first">
      Fourth
    </p>
  </li>
  <li class="element-item active 375 striped-background">
    <p class="first">
      Fifth
    </p>
  </li>
</ul>

Answer 1

Here you go with a solution

$(document).ready(function () {
  $("button[data-filter]").click(function (e) {
    var flag = 0;
    $("button[data-filter]").removeClass('active-filter');
    $(this).addClass('active-filter');
    $('li.element-item').fadeOut(150);
    var filterClass = $(this).attr("data-filter");
    var elements = $('li.element-item');
    //elements.removeClass('striped-background');

    if (filterClass == '*') {
        $(elements).fadeIn(450);
        //elements.addClass('striped-background');
    } else {
        $('li.element-item'+filterClass).fadeIn(450);
        $(elements).not($('li.element-item'+filterClass)).hide();
    }
    setTimeout(function(){
      $( "li" ).each(function(){
        if($(this).css('display') != 'none'){ 
          if(flag%2 == 0) {
            $(this).addClass('secondEle'); 
          }else {
            $(this).removeClass('secondEle'); 
          }
          flag++;
        } else {
          $(this).removeClass('secondEle'); 
        }
      });
    },450);
  });
  $('button[data-filter="*"]').trigger('click');
});

.secondEle {
  background: #bcd5fa;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<section class="filters-button-group">
  <button class="button is-checked" data-filter="*">All</button>
  <button data-filter=".344" class="button">First</button>
  <button data-filter=".345" class="button">Second</button>
  <button data-filter=".348" class="button">Third</button>
  <button data-filter=".374" class="button">Fourth</button>
  <button data-filter=".375" class="button">Fifth</button>
</section>

<ul class="download schlauBuch">
  <li class="element-item active 344 striped-background">
    <p class="first">
      First
    </p>
  </li>
  <li class="element-item active 344 striped-background">
    <p class="first">
      First 2
    </p>
  </li>
  <li class="element-item active 345 striped-background">
    <p class="first">
      Second
    </p>
  </li>
  <li class="element-item active 348 striped-background">
    <p class="first">
      Third
    </p>
  </li>
  <li class="element-item active 348 striped-background">
    <p class="first">
      Third 2
    </p>
  </li>
  <li class="element-item active 348 striped-background">
    <p class="first">
      Third 3
    </p>
  </li>
  <li class="element-item active 348 striped-background">
    <p class="first">
      Third 4
    </p>
  </li>
  <li class="element-item active 348 striped-background">
    <p class="first">
      Third 5
    </p>
  </li>
  <li class="element-item active 374 striped-background">
    <p class="first">
      Fourth
    </p>
  </li>
  <li class="element-item active 375 striped-background">
    <p class="first">
      Fifth
    </p>
  </li>
</ul>

Hope this will help you.