Append 按順序列出每個 div

Question

Append 按順序列出每個 div。 我有一個動態創建的名稱列表：

  <ul id="myList">
    <li>
      <h2>Name 1<br>
      Description</h2>
    </li>
    <li>
      <h2>Name 2<br>
      Description</h2>
    </li>
    <li>
      <h2>Name 3<br>
      Description</h2>
    </li>
  </ul>

我希望這些li中的每一個都是 appendTo 以便這些.photo ，我該怎么做？

  <div id="myCanvas">
    <div class="photo">
      <img src="./app/img/pinturas-1.png"/>
      <h2>Name 1<br>
      Description</h2>
    </div>
    <div class="photo">
      <img src="./app/img/pinturas-2.png"/>
      <h2>Name 2<br>
      Description</h2>
    </div>
    <div class="photo">
      <img src="./app/img/pinturas-3.png"/>
      <h2>Name 3<br>
      Description</h2>
    </div>
  </div>

更新了我的問題。 這就是我想要實現的動態創建：

  <div id="myCanvas">
    <div class="photo">
      <img src="./app/img/pinturas-1.png"/>
      <h2>Name 1<br>
      Description</h2>
    </div>
    <div class="photo">
      <img src="./app/img/pinturas-2.png"/>
      <h2>Name 2<br>
      Description</h2>
    </div>
    <div class="photo">
      <img src="./app/img/pinturas-3.png"/>
      <h2>Name 3<br>
      Description</h2>
    </div>
  </div>

Answer 1

您可以使用以下邏輯將li移動到匹配的div索引。 您可以迭代所有 div 並獲取索引，找到具有匹配索引的 li 的子項，並將 append 找到 div。

 $(function(){ $('#myCanvas.photo').each(function(){ var index = $(this).index(); //console.log($('#myList li:eq(' + index +')').html()); //console.log(index); var $child = $('#myList li:eq(' + index +')').children(); $(this).append($child); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="myList"> <li> <h2>Name 1<br> Description</h2> </li> <li> <h2>Name 2<br> Description</h2> </li> <li> <h2>Name 3<br> Description</h2> </li> </ul> <div id="myCanvas"> <div class="photo"> <img src="./app/img/pinturas-1.png"/> </div> <div class="photo"> <img src="./app/img/pinturas-2.png"/> </div> <div class="photo"> <img src="./app/img/pinturas-3.png"/> </div> </div>