Question

是否有可能在jQuery mobile中有一个列表，该列表对于列表的奇数成员具有一种颜色，对于同一列表中的偶数具有不同的颜色。例如，在列表中，第一个列表项将是灰色的，而对于另一个项，列表颜色将是白色。这可以通过jQuery Mobile完成。

我还应该提一下，这个列表将使用ajax响应构建。

Answer 1

        <div data-demo-html="true">
            <ul data-role="listview">
                <li data-theme="a">Acura</li>
                <li data-theme="b">Audi</li>
            </ul>
        </div><!--/demo-html -->

交替使用数据主题属性应该可以解决问题。

Answer 2

我认为你没有尝试过任何东西。但是我让这个功能变得简单了。只需使用ajax代替循环，其余的都是相同的

var swatch = ['a', 'b'];
$list = $("#list");

for (var i = 0; i < 5; i++) {
    $list.append("<li data-theme='" + swatch[i % 2] + "'>List Item</li>");
}
$list.listview('refresh');

链接：http://jsfiddle.net/androdify/ahWzh/

Answer 3

在CSS中，添加以下两行：

ul.ui-listview li:nth-child(even) a { background-color: #ffd800; }
ul.ui-listview li:nth-child(odd) a { background-color: #000; }

jquery mobile中列表的交替颜色

3 个答案: