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

这只是我的一些代码的片段。我运行多个getJson函数。

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

Answer 1

许多人已经解释了清理的机制，听起来你已经明白了，所以也许缺少的部分时这样做。您可能希望清除事物作为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 2

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

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

然后将append jquery函数应用于相同的选择器，如下面的

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

Answer 3

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

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

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

如何在追加之前清空div

4 个答案: