按列表视图分开

时间:2013-04-29 07:02:17

标签: xml jquery jquery-mobile jquery-mobile-listview

我的XML响应中有一部分需要放在带有数字的不同列表视图中。 这是回复

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

“¶”是每个程序分离的标志。我怎么能追加那个列表视图?分开..我需要一些帮助,谢谢你


这是我的代码。不工作

$(req.responseText).find('NewDataSet').each(function(){
                 var split =  $(this).find('Note').text();
                  var lines = split.split('¶');
                    $.each(lines, function(key, line) {
                    $('#RecipeProc').append('<li><a href="#">' + line + '</a></li>');
                         $('#RecipeProc').listview('refresh');
                   });


              });

1 个答案:

答案 0 :(得分:1)

工作示例:http://jsfiddle.net/Gajotres/Z7uxZ/

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>   

Javascript:

$(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 maight 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');
});

编辑:

调试你的app:

  1. 首先检查变量split是否具有值

    var split =  $(this).find('Note').text(); 
    alert(split); // or console.log(split);
    
  2. 如果第1点正确,则检查sting是否已成功分割:

    var lines = split.split('¶');
    alert(lines.length);