2

私は次のhtmlを持っています:

<div id="info">
    <div class="toolbar">
        <h1 class="popup-title"></h1>
        <a href="#map" class="back">Map</a>

    </div>

    <div class="categories rounded">
        <div class="column-one list-title">
            <h3>Categories</h3>

        </div>

        <div class="column-two list-items cats">
            <ul>

            </ul>

        </div>

    </div>
</div>

この jquery を使用して UL を埋めます。

google.maps.event.addListener( marker, 'click', function () {
    for ( var i = 0; i < places.length; i++ ) {
        for ( var a = 0; a < places[i].categories.length; a++ ) {
            $( '#info .cats ul' ).append( '<li>' + places[i].categories[a] + '</li>' );
        }
    }
});

クラスのaタグを.backクリックすると、追加されたリスト項目が削除されます。

$( '.back' ).on( 'click', function () {
     $( '#info .cats ul' ).html( '' );
} );

残念ながら、リスト項目は削除されず、新しいリスト項目が古いリスト項目に追加され続けます。私も試しました：

$('#info .cats ul li').remove();

編集：追加情報について-これは、私が確認したブラウザで正常に動作しています。このコードは、jqtouch を使用して iOS 上の phonegap/cordova の「li」項目をクリアしません。これは、相互作用するプラットフォームのより深い問題である可能性があります。私が達成しようとしていることに対する代替コードソリューションはおそらくありますか?

4

2 に答える 2

0

コードは問題ありませんが、jQueryappendのベストプラクティスは文字列を使用することです。

例えば

var ulList = '';
    google.maps.event.addListener( marker, 'click', function () {
        for ( var i = 0; i < places.length; i++ ) {
           for ( var a = 0; a < places[i].categories.length; a++ ) {
              ulList += '<li>' + places[i].categories[a] + '</li>';
//$list.append( '<li>' + places[i].categories[a] + '</li>' );
           }
       }
$list.append(ulList);
ulList = null;
    });
于 2012-08-28T02:06:17.700 に答える
0 
<div id="info">
    <div class="toolbar">
        <h1 class="popup-title"></h1>
        <a href="#map" class="back">Map</a>
    </div>

    <div class="categories rounded">
        <div class="column-one list-title">
            <h3>Categories</h3>
        </div>

        <div class="column-two list-items cats"><ul></ul></div>

    </div>
</div>

Javascript

var $list = $( '#info .cats ul' );

google.maps.event.addListener( marker, 'click', function () {
    for ( var i = 0; i < places.length; i++ ) {
       for ( var a = 0; a < places[i].categories.length; a++ ) {
          $list.append( '<li>' + places[i].categories[a] + '</li>' );
       }
   }
});


$('.back').on( 'click' , function ( event ) {
     $list.empty();
     return false; //prevent the default anchor link action
});

アンカー リンクのデフォルト アクションを防止する必要があります。また、セレクターをキャッシュして、毎回 DOM を照会する必要がないようにします。

于 2012-08-28T01:48:49.157 に答える