如何动态地处理交替行？

HTML：

<div class="wrapper"> 
    <div city_id="1" class="odd">Street Name #1 in city 1</div> 
    <div city_id="3" class="even">Street Name #2 in city 3</div> 
    <div city_id="2" class="odd">Street Name #3 in city 2</div> 
    <div city_id="1" class="even">Street Name #4 in city 1</div> 
    <div city_id="1" class="odd">Street Name #5 in city 1</div> 
    <div city_id="3" class="even">Street Name #6 in city 3</div> 
    <div city_id="2" class="odd">Street Name #7 in city 2</div> 
    <div city_id="3" class="even">Street Name #8 in city 3</div> 
    <div city_id="1" class="odd">Street Name #9 in city 1</div> 
</div> 
<select> 
    <option value="">Please select...</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select>

CSS：

.odd { 
    background-color: #777; 
} 
.even { 
    background-color: #aaa; 
}

JS：

$(function() { 
    $("select").change(function() { 
     var city_id = $("option:selected", this).val(); 
     $("div[city_id]").each(function() { 
      $(this).toggle($(this).attr("city_id") == city_id); 
     }); 
    }); 
});

我想保持交替着色均匀当一些行被隐藏时。

这是纯粹的CSS可以做到这一点吗？

如果不是，你会如何使用Javascript/jQuery做到这一点？

来源

2011-10-03 Misha Moroshko

这里有一个简单的解决方案。动态地改变行的类，而所选择的指数的变化

http://jsfiddle.net/4Bjbc/5/

$(function() { 
    $("select").change(function() { 
     var city_id = $("option:selected", this).val(); 
     $("div[city_id]").each(function() { 

      $(this).toggle($(this).attr("city_id") == city_id); 

     }).filter(":visible") ///filter the visible ones 

      .attr("class",function(index,$class){     

      ///if you don't want to miss out the other classes 
      return index%2 == 0 ? $class.replace("odd","even") : $class.replace("even","odd"); 
     }); 
    }); 
});

来源

2011-10-03 10:17:23

不错，简单。但是，完全覆盖'class'属性并不是一个好主意，因为它可能会删除其他类。 –

查看修改。我改变了它。 –

您可以使用CSS为它：

.wrapper div:nth-child(even) { background-color: #777; } 
.wrapper div:nth-child(odd) { background-color: #aaa; }

但是，它不会采取隐藏的行考虑。要做到这一点，你需要更多的限制div选择：

.wrapper div.visible:nth-child(even) { background-color: #777; } 
.wrapper div.visible:nth-child(odd) { background-color: #aaa; }

然后你只需要确保所有可见的元素有visible类。

来源

2011-10-03 10:11:07 ThiefMaster

不妨加入其中，你的代码是从进一步解释的链接。 http://www.w3.org/Style/Examples/007/evenodd.en.html – f0x

谷歌对于'nth-child'并不难。 – ThiefMaster

我也这么认为，但[看起来不是很有帮助]（http://jsfiddle.net/Shef/vPsfp/）。 – Shef

，可以通过JavaScript需要设置类奇数或偶数通过的项目，如果走它们是可见的替代类

来源

2011-10-03 10:11:34

与jQuery你可以在变更事件中使用：

$('.wrapper div:visible:even').css({ 
     'background-color': '#777' 
    }); 
    $('.wrapper div:visible:odd').css({ 
     'background-color': '#aaa' 
    });

FULL CODE

$("select").change(function() { 
    var city_id = $("option:selected", this).val(); 
    $("div[city_id]").each(function() { 
     $(this).toggle($(this).attr("city_id") == city_id); 
    }); 
    $('.wrapper div:visible:even').css({ 
     'background-color': '#777' 
    }); 
    $('.wrapper div:visible:odd').css({ 
     'background-color': '#aaa' 
    }); 
});

这样，它设置背景颜色仅考虑可见行

小提琴在这里：http://jsfiddle.net/4Bjbc/3/

来源

2011-10-03 10:15:03

如何动态地处理交替行？

回答

相关问题