Question

我有以下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”项。这可能是平台交互的更深层次问题。对于我想要实现的目标，是否有一些替代代码解决方案？

Answer 1

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

Answer 2

您的代码很好，但jQuery追加的最佳做法是使用字符串。

e.g。

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;
    });

删除通过单独元素上的click事件通过.append添加的列表项

2 个答案: