1

所以我设置了两个列表视图，我想区分两者，但我不知道如何。我尝试在 Firebug 中进行调试，但我只能更改该类的所有元素的代码。例子：

清单 #1

<ul data-role="listview" data-filter-theme='b' id='userList'>
    <li><img src='img1.jpg'/><h3>Item 1</h3><p>Details 1</p></li>
    <li><img src='img2.jpg'/><h3>Item 2</h3><p>Details 2</p></li>
    <li><img src='img3.jpg'/><h3>Item 3</h3><p>Details 3</p></li>
</ul>

清单 #2

<ul data-role="listview" data-filter-theme='b' id='mainList'>
    <li><img src='img1x.jpg'/><h3>Thing 1</h3><p>Details 1</p></li>
    <li><img src='img2x.jpg'/><h3>Thing 2</h3><p>Details 2</p></li>
    <li><img src='img3x.jpg'/><h3>Thing 3</h3><p>Details 3</p></li>
</ul>

在 LIST #1 我需要说 li 元素是：

.ui-li-static .ui-li{padding:0.1em 0px;}

. . . 在 LIST #2 中，我需要 li 元素为：

.ui-li-static .ui-li{padding:0.7em 15px;}

. . 我尝试在前面添加元素 ID：

#userList .ui-li-static .ui-li {padding:0.1em 0px;}

. . 但这没有用。

4

2 回答 2

1

工作示例：http: //jsfiddle.net/Gajotres/dgt8U/

这种结构.ui-li-static .ui-li dont存在，它是以太#userList .ui-li-static或#userList .ui-li

#userList .ui-li  {
    padding:2.1em 0px !important;
}



#mainList .ui-li  {
    padding:0.7em 15px !important;
}
于 2013-05-31T21:56:44.430 回答
0

使用数据主题选项怎么样？这将很容易区分您的列表。

演示在这里... http://jsfiddle.net/dgt8U/2/

您可以选择数据主题 a 到 e。

HTML

<ul data-role="listview" data-filter-theme='b' data-theme="b" id='userList'>
    <li><img src='img1.jpg'/><h3>Item 1</h3><p>Details 1</p></li>
    <li><img src='img2.jpg'/><h3>Item 2</h3><p>Details 2</p></li>
    <li><img src='img3.jpg'/><h3>Item 3</h3><p>Details 3</p></li>
</ul>
<ul data-role="listview" data-filter-theme='b' data-theme="c" id='mainList'>
    <li><img src='img1x.jpg'/><h3>Thing 1</h3><p>Details 1</p></li>
    <li><img src='img2x.jpg'/><h3>Thing 2</h3><p>Details 2</p></li>
    <li><img src='img3x.jpg'/><h3>Thing 3</h3><p>Details 3</p></li>
</ul>
于 2013-06-01T12:54:24.047 回答