jqueryで奇数要素にクラスを割り当てるの簡素化

Question

以下のコードを簡略化するのに助けてくれる人がいますか？

私がしようとしているのは、「feature-overlay-b」クラスを「feature-overlay-r」に奇数要素に置き換えることだけです。私は ".feature-box：odd"を使ってみましたが、以下のものだけが働いていました。私が行ったように数字を毎回追加避けたい：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> 

Answer 1

odd-selectorが正常に動作し、この例を参照してください。

$(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>

Answer 2

はこれを試してみてください。正常に動作します".box:odd"

jQuery(document).ready(function ($) { 
    var featureElements = $(".feature-box"); 
    for (var i = 1; i < featureElements.length; i += 2) { 
     featureElements[i].addClass("feature-overlay-r") 
    } 
}); 

Answer 3

鉱山。

$(document).ready(function($) { 
 
$('.box:odd').toggleClass('odd box'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div> 
 
<div class="box">s</div>