Question

我正在尝试为一个简单的任务编写一些jQuery，它不是我的强项 - 我想要它做的是搜索基于它的类的指定div，选择图像中的订购然后将它们附加到列表项。我遇到的问题是，当我将它们附加到List项时，每个图像都会有一个带有类的集合li，例如.first-li将附加第一个图像），它们以随机顺序执行以错误的顺序。

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

＆＃13;

$(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');
  });
});

＆＃13;

<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:\Users\CyberfrogPC2\Desktop\devstuff\MerseyTest\1.jpg" />
        <img src="C:\Users\CyberfrogPC2\Desktop\devstuff\MerseyTest\2.png" />
        <img src="C:\Users\CyberfrogPC2\Desktop\devstuff\MerseyTest\3.png" />
        <ul>
          <li class="first-li"></li>
          <li class="second-li"></li>
          <li class="third-li"></li>
        </ul>
      </div>

＆＃13;

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

任何帮助将不胜感激。

Answer 1

首先.appendTo()后发生DOM reflow，因此img:nth-child(3)不会引用相同的DOM元素。

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

＆＃13;

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

＆＃13;

<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:\Users\CyberfrogPC2\Desktop\devstuff\MerseyTest\1.jpg" />
  <img src="C:\Users\CyberfrogPC2\Desktop\devstuff\MerseyTest\2.png" />
  <img src="C:\Users\CyberfrogPC2\Desktop\devstuff\MerseyTest\3.png" />
  <ul>
    <li class="first-li"></li>
    <li class="second-li"></li>
    <li class="third-li"></li>
  </ul>
</div>

＆＃13;

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

1 个答案: