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>
Comments
Post a Comment