如何删除并追加元素li？

Question

我的HTML代码：

<ul class="list"> 
    <li id="thumb-view-1">view 1</li> 
    <li id="thumb-view-2">view 2</li> 
    <li id="thumb-upload-3">upload 3</li> 
    <li id="thumb-view-4">view 4</li> 
    <li id="thumb-view-5">view 5</li> 
</ul> 
<button id="test">Test</button> 

我的JavaScript代码：

<script type="text/javascript"> 
    $('#test').on("click", function(e){ 
     var a = 3; 
     for(var i = 1; i <= 5; i++) { 
      if(i == a) { 
       $('#thumb-upload-'+i).remove(); 
       var res = '<li id="thumb-view-'+i+'">view '+i+'</li>'; 
       $('#thumb-view-'+(i-1)).after(res); 
      } 

     } 
    }); 
</script> 

演示：https://jsfiddle.net/oscar11/eb114sak/

它的工作原理

但是我的情况是dinamyc

var a具有值b因此var a的值可以是1或2或3或4或5

虽然ul标签有5个li标签。而5 L1标签可以有不同的ID类型

所以除了上述的标签里，我给另一种形式

像这样的例子：

<ul class="list"> 
    <li id="thumb-upload-1">upload 1</li> 
    <li id="thumb-view-2">view 2</li> 
    <li id="thumb-view-3">view 3</li> 
    <li id="thumb-view-4">view 4</li> 
    <li id="thumb-view-5">view 5</li> 
</ul> 

等

如果像那结果仍然是错误的

看起来应该叫做li元素，基于a

因此，如果A = 3，那么第三L1标签被删除，并追加

但是，我仍然感到困惑

我该怎么办呢？

Answer 1

改为移除/追加，尽量replaceWith：

$('#test').on("click", function(e){ 
    var a = 3; 
    for(var i = 1; i <= 5; i++) { 
     if(i == a) { 
      var res = '<li id="thumb-view-'+i+'">view '+i+'</li>'; 
      $('#thumb-upload-'+i).replaceWith(res);    
     }   
    } 
}); 

这将只替换匹配#thumb-upload-元素，所以它会处理您的案件动态。

Answer 2

一个简单的解决方案是使用replaceWith和index作为

var index = $("ul.list").index($("li[id^='thumb-upload']")); 

这将让李其分类的索引与thumb-upload开始你的无序列表

$("li[id^='thumb-upload']").replaceWith('<li id="thumb-view-'+index +'">view '+index +'</li>';) 

内和上面的语句将使用您的自定义HTML替换该列表项目

另一个简单的解决方案是只更改t他ID因为我没有看到其他变化

$("li[id^='thumb-upload']").attr('id', $("li[id^='thumb-upload']").attr('id').replace('upload','view'));