如何刪除並追加元素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'));