如何动态处理交替的行？
如何动态处理交替的行？
提问于 2011-10-03 18:09:23
考虑以下示例：(live demo here)
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来完成此操作？
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-10-03 18:17:23
这里有一个简单的解决方案。在所选索引更改时动态更改行的类
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");
});
});
});Stack Overflow用户
发布于 2011-10-03 18:11:08
您可以使用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类。
Stack Overflow用户
发布于 2011-10-03 18:11:35
您需要从javascript中通过遍历这些项来设置类为奇数或偶数，如果它们可见，则交替使用类。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/7633588
复制相关文章
相似问题
腾讯云开发者
