將圖像jquery重新加載/替換為列表項<ul>

Question

大家好我將圖像作為無序列表html中的列表項附加到內部，並使用jquery動態地使用下面的代碼在無序列表中插入項目

 for(var i=1; i<=5; i++){       
   $('ul').append('<li class="stage1">'+ stage1img[i]+'</li>')
 }

這個圖像將在頁面加載現在點擊按鈕點擊我想要重新啟動所有圖像。我所有列表項目（li）與其他項目如下我試過

for(var j=6; j<=10;j++){
      $('li.stage1').replaceWith('<li>'+ stage1img[j]+ '</li>');
     }

Answer 1

我認為你出錯的地方在於你的jQuery選擇。 嘗試添加.eq()

for(var j=6; j<=10;j++){
  $('li.stage1').eq(j-6).replaceWith('<li>'+ stage1img[j]+'stage1 </li>');
 }

Answer 2

我修改了你的代碼，請試一試。

for(var j=6; j<=10;j++){
      $('li.stage1').replaceWith(stage1img[j]);
     }

Answer 3

如果你想刪除所有

items ..你不更改容器的HTML？

 var strHTML=''; for(var j=6; j<=10;j++){ strHTML +='<li>'+ stage1img[j]+ </li>'; } //then consider <div> is the container of all this <li> simply do: $('div').html(strHTML); 

Answer 4

我不是很精通Javascript，但是如果你想要ol那么，為什么不首先刪除舊的ol然后添加新的ol。 刪除ol使用類似的東西：

<script type="text/javascript"><!--
$(document).ready(function() {
  // when the tag with id="btn" is clicked
  $('#btn').click(function() {
    // removes all LI with class="cls" in OL
    $('ol li.cls').remove();
  });
});
--></script>

然后像以前一樣添加新項目。