Geek asks and answers

Reload / replace image jquery as a list item in <ul>

Hi all, I am adding images inside as a list item in an html unordered list and using jquery to dynamically insert an item into an unordered list using below code

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

ths will be loaded when the page loads, now when I click the button I want to move all the images .ie the whole list element (li) with other elements as shown below I tried

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

I think you are mistaken in your choice of jQuery. Try to add.eq()

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

I have a code modification, please try.

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

... 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);
+1

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>

and then add new elements as you did before.

+1
source

More articles:


All Articles