Jquerymobile ListView 列表项问题答案

【问题标题】：Jquerymobile ListView list item issueJquerymobile ListView 列表项问题
【发布时间】：2013-09-19 04:32:17
【问题描述】：

我正在使用 jquery mobile 制作 phonegap 应用程序。我在列表视图中遇到问题。如果列表视图中已经有几个项目并且我正在添加更多项目，那么我想在列表视图中添加的项目是不同的样式。如何在之前和之后添加的两个列表项上添加相同的样式。谢谢。

<html>
<head>
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="js/jquery.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
    <script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
    alert("hello");
    $('#employeeList').append('<li data-icon=delete >hello</li>');
    $('#employeeList').append('<li><a>hello</a></li>');
    $('#employeeList').append('<li><a>hello</a></li>');
    });
    </script>
</head>
<body>
        <div data-role=page id=home>
        <div data-role=header>
        <h1>Home</h1>
        </div>
        <div data-role=listview>
        <ul id="employeeList" class="icon-list"></ul>
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
        </div>
        <div data-role=footer data-position="fixed">
        <h1 >Thanks</h1>
        </div>
        </div>
</body>

【问题讨论】：

Refreshlisview动态添加项目后就可以了。 $('[data-role="listview"]').listview('refresh'); 添加新列表项后。
在你的标记列表中<li>在<ul>之外

标签： jquery listview jquery-mobile cordova

【解决方案1】：

使用这个脚本，

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
alert("hello");
$('#employeeList').append('<li data-icon=delete >hello</li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').listview('refresh');
});
</script>

li 也应该在 ul 标签内

【讨论】：

【解决方案2】：

'hello'项目之所以有不同的风格是因为它们在标签内。

$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').append('<li>hello</li>'); //look differently from the previous line

您还应该考虑将所有属性都放在双引号中：

<div data-role="page" id="home">
<div data-role="header">

下面的演示总结了所有内容：演示：JSFiddle

【讨论】：

【解决方案3】：

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

$('#employeeList').append('<li data-icon=delete >hello</li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').append('<li><a>hello</a></li>');
$('#employeeList').listview('refresh'); //You are missing this one
});
</script>

HTML

<!-- Your Markup should be something like below -->
<ul id="employeeList" data-role="listview">
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
        <li>dfsfdfdsf</li>
   </ul>

【讨论】：