Set background color in DIV when sort alphabetically in jQuery

Question

Good night!

I’m trying to put together a list as follows:

<div>
  <div>id</div>
  <div><a id="orderStatus">status</a></div>
</div>
<div id="container">
  <div class="listStatus" style="background-color:#fff">
    <div>C</div>
    <div>1</div>
  </div>
  <div>
    <div class="listStatus" style="background-color:#DCDCDC">C</div>
    <div>2</div>
  </div>
  <div>
    <div class="listStatus" style="background-color:#FFF">A</div>
    <div>3</div>
  </div>
  <input type="hidden" id="acao" value="asc" />
</div>

The format that is printed is the same as a table, but with div’s.

To facilitate the visualization of the line, I created a line with background FFF and the other DCDCDC and so on, getting 'color yes, color no', but when I sort, the colors sort together making the color functionality lose the goal, which is to facilitate viewing.

Is there any way to make color correction in the function below?

    $("#orderStatus").click(function(){
        var acao = $('#acao').val();
        var statusList = $(".listStatus");
        statusList.sort(function(a, b) {
            if(acao == "asc"){
                $('#acao').val('desc');
                var res = $(b).attr("status") > $(a).attr("status");
            }
            else{
                $('#acao').val('asc');
                var res = $(a).attr("status") > $(b).attr("status");
            }
            return res;

        });

        $('#container').html(statusList);
    });

Answer 1

I suggest you do this with CSS and take the logic out of HTML colors:

#container div div:nth-child(2n){
    	background-color: #dcdcdc;
    }
    
    #container div div:nth-child(2n + 1){
    	background-color: #fff;
    }

<div>
    <div>id</div>
    <div><a id="orderStatus">status</a></div>
</div>
<div id="container">
    <div class="listStatus">
        <div>C</div>
        <div>1</div>
    </div>
    <div>
        <div class="listStatus">C</div>
        <div>2</div>
    </div>
    <div>
        <div class="listStatus">A</div>
        <div>3</div>
    </div>
    <input type="hidden" id="acao" value="asc" />
</div>