For 循環 append div 里面的 div

Question

嗨我想問一下我的代碼中當前的循環我正在手動執行此操作它手動工作

          $( '<div id="demo1" > <span class="value"></span> </div><br> Loading' ).appendTo( $('.test')[0] );         
  $( '<div id="demo2"> <span class="value"></span> </div><br> Loading' ).appendTo( $('.test')[1] );         

但是我正在嘗試購買 function 直到 div id demo10 這是我嘗試在 for 循環中實現的嘗試，但它不起作用，只有顯示空白的人可以指導我我是 jquery 的新手，我將非常感謝任何建議。 謝謝

  function newdiv()
{
    var j,i;
     for (i = 0; i <= 5; i++,j=i+1) {

      $( '<div id="demo-"'+j+'"' +' > <span class="value"></span> </div><br> Loading' ).appendTo( $('.test')[i] );         

     }

}

Answer 1

我希望下面的代碼能解決這個問題

詳細說明

1. 所以當dom加載時我們需要執行function，所以我們使用newdiv()調用了function

2. 現在 function 被執行，所以每次 i 值都會增加，它會將新元素添加到已經在 html 中的 div 中。 我們 select 它通過 class 名稱是測試。

3. 因此它將 append 新元素添加到測試div

 $(document).ready(function() { function newdiv() { var j, i; for (i = 0; i <= 5; i++, j = i + 1) { var appendElement = `<div id='demo-${i}'> <span class='value'></span> </div> <br> Loading`; $('.test').append(appendElement) } } newdiv(); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='test'> hello </div>

Answer 2

試用此代碼，它也給出相同的 output。

 var i=0; for (i = 1; i < 11; i++) { if(i==1) $("#demo").after('<div id="demo1" > <span class="value"></span> </div><br> Loading'); else{ var div = parseInt(i)-1; $("#demo"+div).after('<div id="demo'+parseInt(i)+'" > <span class="value"></span> </div><br> Loading'); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="demo" ></div>