How to keep a list of alternate backgrounds when searching

Question

I have a gray background list in the item:Nth-Child(Odd) but when I do a search a None display is inserted in the items that contain nothing related and end up messing the order of colors, I need them to be reordered according to the search result

put an example of code in codepen: https://codepen.io/renan-hugo/pen/aQVpdb

Answer 1

I think only with CSS is not possible, since the even and the odd will also tell the hidden elements.

One solution is to use a function to reapply backgrounds, and call it when changing the search result:

function evenOdd(){
   // seleciona apenas as divs filhas diretas de .wrapper-assoc que não for oculta
   var linhas = document.querySelectorAll(".wrapper-assoc > div:not([style*='display: none'])");
   var odd = "FFF";
   var even = "f30";
   for(var x=0; x < linhas.length; x++){
      if(x%2 != 0){
         linhas[x].style.background = "#"+even;
      }else{
         linhas[x].style.background = "#"+odd;
      }
   }
}

Lines that are not even receive the color of the even, and the others the color of odd.

You can wear a ternary if you want instead of if:

linhas[x].style.background = "#"+ (x%2 != 0 ? even : odd);

Example:

function remover(){
   document.getElementById("linha3").style.display = "none";
   document.getElementById("linha6").style.display = "none";
   evenOdd();
}

function evenOdd(){
   var linhas = document.querySelectorAll(".wrapper-assoc > div:not([style*='display: none'])");
   var odd = "FFF";
   var even = "f30";
   for(var x=0; x < linhas.length; x++){
      linhas[x].style.background = "#"+ (x%2 != 0 ? even : odd);
   }
}

.wrapper-assoc > div:nth-child(even) {background: #f30}
.wrapper-assoc > div:nth-child(odd) {background: #FFF}

<button onclick="remover()">Ocultar linhas 3 e 6</button>
<div class="wrapper-assoc">
   <div>
      <div>1</div>
   </div>
   <div>
      <div>2</div>
   </div>
   <div id="linha3">
      <div>3</div>
   </div>
   <div>
      <div>4</div>
   </div>
   <div>
      <div>5</div>
   </div>
   <div id="linha6">
      <div>6</div>
   </div>
</div>

Fork of your CODEPEN

Compatibility of the negation pseudo-class :not():