循环遍历列表以追加和删除 使用 jQuery

Question

我每 5 秒调用一次服务器来获取数据，然后循环遍历我的列表并将包含正确数据的“跨度”附加到我的列表中。问题是当从服务器返回的数据为空时，我无法使“span”消失，除非我在“span”上使用“fadeOut()”。但随后我无法计算所有“li span”（countCont()）的正确总和，因为它们仍然附加到 DOM 并具有值。 所以我想做的是，如果从分配给它的服务器返回的数据为空，则删除相应的“li span”，这样我就可以计算正确的总和。 以下是我将数据分配到列表的方法：

     $.get(url, function (data) {
        $.each(data, function (i, info) {
          $("#accordion li").text(function (y, name) {
            if ($(this).is(":contains(" + info.cName + ")")) {
                if ($(this).is(":has(span)")) {
                    $(this).children().replaceWith('<span class = "cCount">' + info.count + '</span>');
                    $(this).children().fadeOut(10000);
                } else {
                    $(this).append('<span class = "cCount">' + info.count + '</span>');
                }
             }

             countCont($(this).parent().attr('id'));
          });
       });
    });

Answer 1

淡出后，使用 .remove()

//...
$("#accordion li").text(function (y, name) {
   var $this = $(this); //also store this, dont select it 5 times

   if ($this.is(":contains(" + info.cName + ")")) {
      if ($this.is(":has(span)")) {
         $this.children().replaceWith('<span class = "cCount">' + info.count + '</span>');
         $this.children().fadeOut(10000);
         $this.remove();
      } else {
         $this.append('<span class = "cCount">' + info.count + '</span>');
      }
   }
   countCont($this.parent().attr('id'));
});

Edit:< 将其从 DOM 中删除/strong> 作为对评论的回应，这将删除跨度（如果存在），然后添加一个新跨度：

//...

var $this = $(this); //also store this, dont select it 5 times

if ($this.is(":contains(" + info.cName + ")")) {
   if ($this.is(":has(span)")) {
      //remove the span
      var $span = $('span', this);
      $span.fadeOut(10000);
      $span.remove();
   }
   //always append new span
   $this.append('<span class = "cCount">' + info.count + '</span>');
}