Simplification of assigning a class to odd elements with jquery -

can me in simplifying below code.

all trying replace "feature-overlay-b" class "feature-overlay-r" odd elements. tried using ".feature-box:odd" below worked. avoid adding numbers each time did :p

<script> jquery(document).ready(function( $ ) { if ($(".feature-box")[1]){     document.getelementsbyclassname("feature-box")[1].childnodes[1].classname = "feature-overlay-r"; } if ($(".feature-box")[3]){     document.getelementsbyclassname("feature-box")[3].childnodes[1].classname = "feature-overlay-r"; } if ($(".feature-box")[5]){     document.getelementsbyclassname("feature-box")[5].childnodes[1].classname = "feature-overlay-r"; } if ($(".feature-box")[7]){     document.getelementsbyclassname("feature-box")[7].childnodes[1].classname = "feature-overlay-r"; } if ($(".feature-box")[9]){     document.getelementsbyclassname("feature-box")[9].childnodes[1].classname = "feature-overlay-r"; } if ($(".feature-box")[11]){     document.getelementsbyclassname("feature-box")[11].childnodes[1].classname = "feature-overlay-r"; } if ($(".feature-box")[13]){     document.getelementsbyclassname("feature-box")[13].childnodes[1].classname = "feature-overlay-r"; } if ($(".feature-box")[15]){     document.getelementsbyclassname("feature-box")[15].childnodes[1].classname = "feature-overlay-r"; } if ($(".feature-box")[17]){     document.getelementsbyclassname("feature-box")[17].childnodes[1].classname = "feature-overlay-r"; } if ($(".feature-box")[19]){     document.getelementsbyclassname("feature-box")[19].childnodes[1].classname = "feature-overlay-r"; } }) </script>   //sample loop <div class="medium-6 large-3 columns feature-box">         <div class="feature-overlay-b">             <div class="feature-overlay-container">                                  <div class="feature-title">hello world! a</div>             </div>                         </div> </div>  <div class="medium-6 large-3 columns feature-box">         <div class="feature-overlay-b">             <div class="feature-overlay-container">                                  <div class="feature-title">hello world! b</div>             </div>                         </div> </div> 

the odd-selector works fine, see example:

$(function() {    $(".feature-box:odd").find(".feature-overlay-b").addclass("feature-overlay-r").removeclass("feature-overlay-b");  });

.feature-overlay-r {    color: red;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div class="feature-box">    <div class="feature-overlay-b">      test    </div>  </div>  <div class="feature-box">    <div class="feature-overlay-b">      test    </div>  </div>  <div class="feature-box">    <div class="feature-overlay-b">      test    </div>  </div>