2013-04-30 55 views
0

如何将此作为段落添加每行的自动编号。下面的例子是在listview中。查看链接。其工作。作为段落追加编号

Working Demo but in listview

我的HTML代码:

<!DOCTYPE html> 
<html> 
<head> 
    <title>jQM Complex Demo</title> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> 
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>  
</head> 
<body> 
    <div data-role="page" id="index"> 
     <div data-theme="a" data-role="header"> 
      <h3> 
       First Page 
      </h3> 
      <a href="#second" class="ui-btn-right">Next</a> 
     </div> 

     <div data-role="content"> 
      <ul data-role="listview" data-theme="a" id="custom-listview"> 

      </ul> 
     </div> 

     <div data-theme="a" data-role="footer" data-position="fixed"> 

     </div> 
    </div>  
</body> 
</html> 

的js代码

$(document).on('pagebeforeshow', '#index', function(){  
var split = 'Cook pasta according to directions, chill in ice water, drain.¶Blanch broccoli in boiling water, chill in ice water, drain.¶Use ½ soy sauce to season the chicken, heat oil in no stick pan, brown chicken, and reduce heat and finish cooking.¶Don"t overcook! Slice chicken into 1" strips, turn and cut into ¼" pieces, place into bowl with other ingredients except dressing and soy sauce.¶Mix remainder of soy sauce into dressing and pour over pasta, chicken, and vegetables.¶Toss gently and serve immediately.¶You might like to leave the pasta, chicken, broccoli un-chilled and serve it semi-warm'; 

var lines = split.split('¶'); 
$.each(lines, function(key, line) { 
    $('#custom-listview').append('<li><a href="#">' + line + '</a></li>'); 
}); 
$('#custom-listview').listview('refresh'); 
}); 
+1

http://jsfiddle.net/Z7uxZ/1/ - 'key'实际上是在你的榜样的'index'。 – ahren 2013-04-30 06:10:18

+0

我该如何从1开始? – 2013-04-30 06:11:52

+2

'(key + 1)' - 只需加1。 – ahren 2013-04-30 06:12:32

回答

1

只是声明了一个变量,并增加它为您添加的每个项目。

var number = 1; 
$.each(lines, function(key, line) { 
    $('#custom-listview').append('<li><a href="#">' + number + '. ' + line + '</a></li>'); 
    number++; 
}); 

http://jsfiddle.net/Z7uxZ/2/