HTML

Question

所以我有两个listview设置，我想区分这两个，但我无法弄清楚如何。我试图在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>

在列表＃1中，我需要说li元素是：

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

。。。在列表＃2中，我需要li元素：

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

。。我试图在前面添加元素ID：

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

。。但那没用。

Answer 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;
}

Answer 2

使用数据主题选项怎么样？这样可以轻松区分您的列表。

DEMO在这里...... 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>

jquery mobile更改特定元素

2 个答案:

HTML