javascript - 将图像 jquery 重新加载/替换为列表项

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

我不是很精通 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>

然后像以前一样附加新项目。

Answer 3

我已经修改了您的代码，请尝试一下。

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

Answer 4

如果要删除所有

items ..y 你不改变容器的 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);