Question

我正在使用jquery mobile制作一个phonegap应用程序。我在listview中有一个问题。如果我的列表视图中已有少量项目，我正在添加更多项目，那么我想在列表视图中添加的项目是不同的风格。如何在前后添加的列表项上添加相同的样式。谢谢。

enter image description here

<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>

Answer 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标签内

Answer 2

<强> JS

<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>

Answer 3

'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

Jquerymobile ListView列表项问题

3 个答案: