2016-05-04 12 views
-1

this oneのような投稿を読んだことがありますが、それは私には効果がありません。Append()リストアイテムを複製する

私はリストビューにデータをリストします。ヘッダーの戻るボタンを押してプロセスを繰り返すとき、append()が毎回同じリストアイテムを追加しないようにしたい。

どうすればいいですか?私は.html()を使用しましたが、2回目の試行でCSSを失いました。私は移動しました$( '#list')。append(list_item);を$の外側に(....)しかし、それはうまくいきませんでした。

$.each(vaga, function(index, item){ 

    list_item = '<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>'; 

}); 

$('#list').append(list_item); 

index.htmlを

<head> 
    <link rel="stylesheet" type="text/css" href="media_button_bar/css/media_button_bar.css"> 
    <link rel="stylesheet" type="text/css" href="jqm/jquery.mobile-min.css"> 
    <meta charset="UTF-8"> 
    <title>Blank App Designer Cordova Web App Project Template</title> 
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
    <link rel="stylesheet" href="css/app.css"> 
    <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less"> 
    <script src="cordova.js" id="xdkJScordova_"></script> 

    <script src="js/app.js"></script> 
    <!-- for your event code, see README and file comments for details --> 
    <script src="js/init-app.js"></script> 
    <!-- for your init code, see README and file comments for details --> 
    <script src="xdk/init-dev.js"></script> 
    <!-- normalizes device and document ready events, see file for details --> 
    <script type="application/javascript" src="lib/jquery.min.js"></script> 
    <script type="application/javascript" src="jqm/jquery.mobile-min.js" data-ver="0"></script> 
    <script type="application/javascript" src="js/index_user_scripts.js"></script> 
    <script type="application/javascript" src="xdk/ad/jqm_subpage.js"></script> 
    <script type="application/javascript" src="sidebar/js/hammer.js"></script> 
    <script type="application/javascript" src="sidebar/js/jquery.hammer.js"></script> 
    <script type="application/javascript" src="sidebar/js/swipe-hammer.js"></script> 
    <script type="application/javascript" src="sidebar/js/sidebar.js"></script> 
</head> 

<body> 

    <div class="upage" id="areapage" data-role="page"> 
     <div class="upage-outer"> 
      <div data-role="header" class="container-group inner-element uib_w_7" data-uib="jquery_mobile/header" data-ver="0" id="header_areas"> 
       <h1>Header</h1> 
       <div class="widget-container wrapping-col single-centered"></div> 
       <div class="widget-container content-area horiz-area wrapping-col left"><a class="widget uib_w_25 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" data-icon="bars" data-iconpos="notext" id="opensidebar_btn">Button</a> 
       </div> 
       <div class="widget-container content-area horiz-area wrapping-col right"></div> 
      </div> 
      <div class="upage-content ac0 content-area vertical-col left" id="page_74_57"> 
       <div class="grid grid-pad urow uib_row_5 row-height-5" data-uib="layout/row" data-ver="0"> 
        <div class="col uib_col_3 col-0_12-12" data-uib="layout/col" data-ver="0"> 
         <div class="widget-container content-area vertical-col left"> 
          <p style="font-style: italic; color: #246525;">Select by area</p> 
          <span class="uib_shim"></span> 
         </div> 
        </div> 
        <span class="uib_shim"></span> 
       </div> 

       <div class="grid grid-pad urow uib_row_7 row-height-7" data-uib="layout/row" data-ver="0"> 
        <div class="col uib_col_5 col-0_12-12" data-uib="layout/col" data-ver="0"> 
         <div class="widget-container content-area vertical-col left"> 
          <div class="sbs-container widget uib_w_8 d-margins" data-uib="layout/side_by_side" data-ver="0"> 
           <div class="leftContent widget-container"> 
            <a class="uib-graphic-button default-graphic-sizing default-image-sizing hover-graphic-button active-graphic-button default-graphic-button default-graphic-text widget uib_w_10 d-margins media-button-text-bottom" data-uib="media/graphic_button" data-ver="0" 
            id="admin"> 
             <img src="images/administrativa.png"> 
             <span class="uib-caption">Admin</span> 
            </a> 
           </div> 
          </div> 
         </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div>      

       <!-- LIST PAGE --> 

     <div class="upage" id="listpage" data-role="page"> 
     <div class="upage-outer"> 
      <div data-role="header" class="container-group inner-element uib_w_15" data-uib="jquery_mobile/header" data-ver="0" id="header_listpage"> 
       <h1>Header</h1> 
       <div class="widget-container wrapping-col single-centered"></div> 
       <div class="widget-container content-area horiz-area wrapping-col left"><a class="widget uib_w_18 d-margins" data-uib="jquery_mobile/button" data-ver="0" data-role="button" data-icon="arrow-l" data-iconpos="notext" id="listpage_back_btn" data-transition="fade">Button</a> 
       </div> 
       <div class="widget-container content-area horiz-area wrapping-col right"></div> 
      </div> 
      <div class="upage-content ac0 content-area vertical-col left" id="page_91_35"> 
       <div class="widget uib_w_16 ui-content no_wrap outset-margin d-margins" data-uib="jquery_mobile/listview" data-ver="0" id="listview"> 
        <ul data-role="listview" id="list"> 

        <!-- list item appended in js --> 
         <!--<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="#"><span>Listitem</span></a> 
         </li>--> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

</body> 
+0

が私にデータ-UIB = "jquery_mobile/ListItemの" データ-VER = "0" データ・アイコン」についての詳細を教えて$ .each(...)内メートルを追加=」 carat-r "'これらの属性をどのようなコードや依存関係で使用していますか?これはおそらくあなたの問題がある場所です。 – 42shadow42

+0

@ 42shadow42 jqueryフレームワークを使用してintel xdkで作成されたハイブリッドアプリ –

+0

jqueryを使用してこれらの属性にフックを使用する方法を示すコードのスニペットを共有できますか? – 42shadow42

答えて

0

フレームワークの問題のようです。私はjqueryからブートストラップに変更し、それは必要なように機能しました。すべての前にリストを空にし、それを

$("#list").empty(); 

... 

$.each(vaga, function(index, item){ 

    list_item = '<li id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>'; 

    $('#list').append(list_item); 

}); 
0

クリアは、ループの外リスト、およびこの

$('#list').html(''); 
    $.each(vaga, function(index, item){ 
    var list_item = '<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>'; 
    $('#list').append(list_item); 
    }); 

のように内部の追加のスタイリングの問題は、あなたのフレームワークのできないことに起因すると思われますDOMの変更に反応するためには、データが処理される前に最初のスタイルが実行されている必要があります。これを解決するには、データが処理されたときに存在していたスタイル付きテンプレートを複製し、データに合わせて調整します。

サンプルがすぐに届きます!

if($("li.widget span:contains('" + item.CARGO + "')").length == 0){ 
    // append here 
} 

にまたがるあなたはを参照してくださいポストから

+0

の中にあります。$( '#list')を使用しても、2回目の試行でCSSが失われています。 –

0

は...変更オプションコードは、すべてのあなたのリストの要素を作成することで、その後、追加します

$.each(vaga, function(index, item){ 
    if($("li.widget span:contains('" + item.CARGO + "')").length == 0){ 
    list_item = '<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>'; 
    $('#list').append(list_item); 
    } 
}); 
+0

2回目の試行で開かない –

0

別の解決策のようなものでなければなりません結果は次のようになります。

var list_item = ""; 

$.each(vaga, function(index, item){ 
    list_item += '<li class="widget uib_w_17" data-uib="jquery_mobile/listitem" data-ver="0" data-icon="carat-r" id="listitem"><a href="javascript:ViewItem('+item.ID+');"><span>'+item.CARGO+'</span></a></li>'; 
}); 

$('#list').html(list_item); 

このようにして、DOMを1回だけ変更すると、パフォーマンスが向上します私はうんざりする。

+0

2回目の試行でCSSが失われています –