要素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がある1〜5の間です。したがって、var aは値1または2または3または4または5を持つことができます。

ulタグには5つのliタグがあります。以下のような場合は

<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> 

など

：5のliタグは上記のタグ李に加えて、異なるIDタイプので

を持つことができ、私はこのような別の形

の例を与えますそれでも結果は間違っています

a

に基づいてli要素を呼び出すようです210

そう= 3その後、第三のliタグは、私はそれを行うことができますどのように

削除と

を追加しかし、私はまだ混乱している場合はどうなるでしょうか？

Answer 1

代わりの削除/追加、replaceWithしてみてください：それはあなたの動的なケースを処理しますので、これが唯一、#thumb-upload-要素にマッチ置き換えられます

$('#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);    
     }   
    } 
}); 

を。

Answer 2

簡単な解決策は、Liクラスのインデックスを取得します

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

このようreplaceWithとindexを使用することができ、あなた順不同リスト

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

内thumb-uploadで始まり、上記のステートメントうそのリスト項目をカスタムHTMLに置き換えてください

もう1つの簡単な解決策は、私は他の変更が表示されないのでIDをIDにします

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