Question

有人可以帮我简化以下代码吗？

我要做的就是替换＆＃34; feature-overlay-b＆＃34; class to＆＃34; feature-overlay-r＆＃34;只对奇数元素。我尝试使用＆＃34; .feature-box：odd＆＃34;但只有下面的工作。我想避免像我一样每次都添加数字：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

我的".box:odd"工作正常。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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 3

试试这个：

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

使用jquery简化将类分配给奇数元素的过程

3 个答案: