如何在追加之前清空div

Question

我正在使用 Freebase Search Suggest 将某个关键字绑定到 getJson 请求。问题是我将 getJson 函数和相应的 .append/.prepend 函数绑定到具有搜索建议的输入字段。现在，如果要清除（.empty）包含 getJson 函数结果的 div，我最终将无法追加任何内容。

所以每次我进行搜索时，结果 div 都是空的。如果我不尝试运行空函数并进行第二次搜索，则新信息将附加在先前信息之上。

我的网站 www.karsten-tietje.dk/sw

$('#myinput').suggest({key: "<mykey>","filter": "(all type:/music/musical_group )"

        })
        .bind("fb-select", function(e, data) {

$.getJSON("http://ws.spotify.com/search/1/track.json?q="+search_val, function(data) {
  items = [];

        $.each(data["tracks"], function(key, val) {
        items.push('<li class="spot"><span typeof="MusicRecording" property="track"><p>Name: <strong><span property="name">' + val["name"] + '</span></span></strong></p> <p>Album <strong>' + val.album["name"] + '</strong></p><p> Released: <strong>' + val.album["released"] +'</strong></p><p><strong><a href="' + val["href"] +'"><i class="icon-play-sign"></i> Start Spotify</a></strong></p>');
            if ( key === 7 ) 
            {
            return false;
            }
        });

        $('#spotify-div').prepend('<h3 style="border-bottom:1px solid white;">Spotify tracks</h3>');
        $('#spotify').html(items.join('</li>'));
    });
});

这只是我的一些代码的 sn-p。我运行多个 getJson 函数。

如何在运行其他函数之前清除/清空结果 div？

Answer 1

您也可以通过清除html的内部html来做到这一点，id为“spotify”：

$('#spotify').empty();

Answer 2

选择元素并将HTML留空，如下所示

jQuery('#selector').html('');

然后在下面的相同选择器上应用append jquery 函数后

jQuery('#selector').append("<p>text</p>");

Answer 3

很多人已经解释了清除机制，听起来您已经了解了，所以也许缺少的部分是何时去做。您可能想在 Freebase Suggest 选择回调中首先清除一些内容，然后再向 Spotify 等其他服务发起任何查询（即在第一个 $.getJSON() 之前）。

与您的问题无关，但不要忘记 Freebase 许可证的归属要求（您的网站上目前未提供）。

编辑：这是您添加空的代码：

$('#myinput').suggest({key: "<mykey>","filter": "(all type:/music/musical_group )"

        })
.bind("fb-select", function(e, data) {
    $('#spotify-div').empty(); // empty the div before fetching and adding new data
    $.getJSON("http://ws.spotify.com/search/1/track.json?q="+search_val, function(data) {
        items = [];
        $.each(data["tracks"], function(key, val) {
            items.push('<li class="spot"><span typeof="MusicRecording" property="track"><p>Name: <strong><span property="name">' + val["name"] + '</span></span></strong></p> <p>Album <strong>' + val.album["name"] + '</strong></p><p> Released: <strong>' + val.album["released"] +'</strong></p><p><strong><a href="' + val["href"] +'"><i class="icon-play-sign"></i> Start Spotify</a></strong></p>');
            if ( key === 7 ) 
            {
            return false;
            }
        });

        $('#spotify-div').prepend('<h3 style="border-bottom:1px solid white;">Spotify tracks</h3>');
        $('#spotify').html(items.join('</li>'));
    });
});

Answer 4

使用 jQuery 可以有多种方法来清空元素的内容以及附加/前置内容。

一个是.empty();（Documentation）

$('#spotify-div').empty().prepend('<h3>YourHTML Here</h3>');

另一个是.html( [ html ] ); (Documentation)

$('#spotify-div').html('').prepend('<h3>YourHTML Here</h3>');

如果您正在更改 html 并且不担心保留事件，您可以通过 .html( 'Your HTML' ); 函数传递您的 html

$('#spotify-div').html('<h3>YourHTML Here</h3>');