JQuery追加李存在ul

我搜索了很多，并做了很多改变，但我仍然无法找到解决方案。JQuery追加李存在ul

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

HTML是：

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

我第一次使用下面的代码删除所有李：

$('#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。我不能成功。

来源

2016-04-05 nickyzhi

什么时候你试图追加新的元素？在调用你的fadeOut（）片断或什么之后？你应该更好地描述你的意思，但它不起作用？只是FYI，fadeOut（）完成回调被异步调用，所以如果在完成回调被触发之前追加元素，使用'$（“＃wordPrediction li”）。remove（）;'，你只是删除刚添加的内容。相反，你可以使用'$（this）.remove（）;'但你确实有更好的事情来处理你的预期行为 –

哦，上帝，它的工作！当我改变$（“＃wordPrediction李”）。到$（this）.remove;并保留其余的代码。 – nickyzhi

我没有看到您的代码有任何问题。你有没有把你的for回路放在fadeOut的回调中，在$("#wordPrediction li").remove();之后？您需要将您的循环放在remove之后，否则您的新元素将被remove删除。

这里是工作提琴：

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

这不是预期的行为？

来源

2016-04-05 15:49:21 Komo

谢谢您的回复！ – nickyzhi

实际上，我想首先删除所有的li，用fadeOut效果，然后将新的数组添加到ul中。我替换了$（“＃wordPrediction li”）。remove（）;与$（this）.remove（）;,然后我的问题就解决了。 – nickyzhi

我没有看到您发布的代码有什么问题，也许您需要提供更多信息？请参阅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>

来源

2016-04-05 15:53:32 Blindsyde

是的，它的工作原理！也许我应该把它分成两个功能。 – nickyzhi

JQuery追加李存在ul

回答

相关问题