Question

我搜索了很多并做了很多改动，但我仍然找不到解决方案。

我想要做的是点击一个按钮，删除ul中的所有li并在此ul中添加一些其他新的li。

HTML是：

<ul id = "wordPrediction">
    <li class="nextWord">foot</li>
    <li class="nextWord">hand</li>
 </ul>

我首先使用以下代码删除所有li：

$('#wordPrediction li').each(function(){
    $("#wordPrediction li").fadeOut(500, function(){ 
        $("#wordPrediction li").remove(); 
    });
});

然后我尝试将nextWordArray中的所有元素追加到这个ul，我试过：

for (var i=0;i<nextWordArray.length;i++){
    $('#wordPrediction').append($("<li class=\"nextWord\">"+nextWordArray[i] +"</li>"));
}

但是我失败了，特别是当我有nextWordArray = ['actor']时，这意味着我的nextWordArray.length = 1.我无法成功追加。

Answer 1

我发现您的代码没有任何问题。您是否在for行之后的fadeOut回调中放置了$("#wordPrediction li").remove();循环了吗？您需要在remove之后放置循环，否则remove将删除新元素。

这是一个工作小提琴：

https://jsfiddle.net/eh1snor1/1/

这不是预期的行为吗？

Answer 2

我没看到您发布的代码有什么问题，也许您需要提供更多信息？请参阅working fiddle.

var nextWordArray = ["toe", "finger", "thumb", "nose", "elbow"];
$("#removeListItems").on("click", function(){
    $('#wordPrediction li').each(function(){
    $("#wordPrediction li").fadeOut(500, function(){ 
        $("#wordPrediction li").remove(); 
    });
    });
});


$("#addNewListItems").on("click", function(){
  for (var i=0;i<nextWordArray.length;i++){
      $('#wordPrediction').append($("<li class=\"nextWord\">"+nextWordArray[i] +"</li>"));
  }
});

<ul id = "wordPrediction">
    <li class="nextWord">foot</li>
    <li class="nextWord">hand</li>
 </ul>

 <button id="removeListItems">
 Remove
 </button>

  <button id="addNewListItems">
 Add New
 </button>

JQuery将li附加到存在的ul

2 个答案: