jQuery - 附加的图像将自身附加到随机列表项，而不是具有 set 类的项

Question

我正在尝试为一个简单的任务编写一些jQuery，这不是我的强项 - 我希望它做的是根据它的类搜索指定的div，按顺序选择图像，然后将它们附加到列表项。我遇到的问题是，当我将它们附加到列表项时，每个图像都会有一个带有类的集合 li，例如 .first-li 将附加第一个图像(，它们以随机顺序执行此操作导致顺序不正确。

这很可能是我附加图像的方式，但我似乎不知所措

$(document).ready(function() {
  $('.content-home').ready(function() {
    $(this).find('img:nth-child(1)').appendTo('.first-li');
    $(this).find('img:nth-child(2)').appendTo('.second-li');
    $(this).find('img:nth-child(3)').appendTo('.third-li');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="content-home">
        <h4>Content</h4>
        <img src="C:UsersCyberfrogPC2DesktopdevstuffMerseyTest1.jpg" />
        <img src="C:UsersCyberfrogPC2DesktopdevstuffMerseyTest2.png" />
        <img src="C:UsersCyberfrogPC2DesktopdevstuffMerseyTest3.png" />
        <ul>
          <li class="first-li"></li>
          <li class="second-li"></li>
          <li class="third-li"></li>
        </ul>
      </div>

我有三个用于测试目的的图像，每个图像上都有一个从 1 到 3 的数字，所以我可以在它们附加时看到顺序，在某些情况下，2 和 3 可能最终在同一行上，或者一个将在最后一个 li 上，而数字 3 根本没有附加。

任何帮助将不胜感激。

Answer 1

在第一次.appendTo()之后，DOM 重排发生，所以img:nth-child(3)不引用同一个 DOM 元素。

您可以使用.each()及其索引的组合来定位所需的li，然后可以使用.appendTo()。

$(document).ready(function() {
  $('.content-home img').each(function(index) {
    $(this).appendTo($('.content-home li').eq(index));    
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-home">
  <h4>Content</h4>
  <img src="C:UsersCyberfrogPC2DesktopdevstuffMerseyTest1.jpg" />
  <img src="C:UsersCyberfrogPC2DesktopdevstuffMerseyTest2.png" />
  <img src="C:UsersCyberfrogPC2DesktopdevstuffMerseyTest3.png" />
  <ul>
    <li class="first-li"></li>
    <li class="second-li"></li>
    <li class="third-li"></li>
  </ul>
</div>