javascript - 从 Ajax 填充的动态 jQuery unslider 不清除子项

Question

我有这个 unslider，它显示通过 Ajax 从某些来源轮询的推文，每 8 秒刷新一次。Unslider 第一次工作正常，但随后当新的 ajax 查询被触发时，它应该清除第一个

标签并重新填充新的。出于某种原因，它不会清除旧标签，而是将新标签附加到旧标签上。以下是截图：

var flag = false;
(function setTweets() {

  $.ajax({
    type: "GET",
    url: "../tweets/get_latest_tweets",
    success: function(data) {
      //clear all children first
      $('#tweets-list').children().remove();
      for (var i = 0; i < data.length; i++) {
        $('<li>' + data[i].text + '<div class="card-footer bg-twitter"><div class="card-profile-image"><img src="' + data[i].pic + '" class="rounded-circle img-border box-shadow-1" alt="Card Image"></div>' +
          '<footer class="blockquote-footer bg-twitter white"><strong>@' + data[i].screen_name + '</strong></footer></div></li>').appendTo($('#tweets-list'))
      }

      if (!flag) {
        $('#tweet-slider').unslider({ //initialize unslider only once
          autoplay: true,
          arrows: true,
          speed: 1000,
          delay: 7000,
        });
        flag = true;
      }


    },
    error: function(err) {
      console.log(err);
    }
  }).then(function() {
    setTimeout(setTweets, 8000); //Todo: Check how to do this async (dynamic adding of points)
  });
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="card bg-twitter white">
  <div class="card-content p-2">
    <div class="card-body">
      <div class="text-center mb-1">
        <i class="ft-twitter font-large-3"></i>
      </div>
      <div class="tweet-slider" id="tweet-slider">
        <ul id='tweets-list' class="text-center">

        </ul>
      </div>
    </div>
  </div>

Answer 1

与 .empty() 类似，.remove() 方法将元素从 DOM 中取出。当您想要删除元素本身以及其中的所有内容时，请使用 .remove()。除了元素本身，所有与元素关联的绑定事件和 jQuery 数据都将被删除。要删除元素而不删除数据和事件，请改用 .detach()。

据此，您正在删除 # tweets-list 作为一个元素，我认为如果您使用 .empty () 您将清除它

用途$('#tweets-list').empty();

Answer 2

我正在阅读 unslider 网站，它说如果您删除或添加幻灯片，您应该使用该方法slider.unslider('calculateSlides');

var flag = false;
(function setTweets() {

  $.ajax({
    type: "GET",
    url: "../tweets/get_latest_tweets",
    success: function(data) {
      //clear all children first
      $('#tweets-list').children().remove();
      for (var i = 0; i < data.length; i++) {
        $('<li>' + data[i].text + '<div class="card-footer bg-twitter"><div class="card-profile-image"><img src="' + data[i].pic + '" class="rounded-circle img-border box-shadow-1" alt="Card Image"></div>' +
          '<footer class="blockquote-footer bg-twitter white"><strong>@' + data[i].screen_name + '</strong></footer></div></li>').appendTo($('#tweets-list'))
      }

      if (!flag) {
        $('#tweet-slider').unslider('calculateSlides');
        flag = true;
      }


    },
    error: function(err) {
      console.log(err);
    }
  }).then(function() {
    setTimeout(setTweets, 8000); //Todo: Check how to do this async (dynamic adding of points)
  });
})();

显然没有必要重新初始化 unslider，尝试一下，但是，你重新启动它