javascript - 循环遍历 ul li 并使用 insertBefore 将图像向上移动两个元素

Question

我正在学习 js 和 jquery，并且一直在尝试解决这个小问题，当我尝试循环页面上的 ul 并将 dom 元素(特别是图像)在我的 html 中向上移动两层时遇到的问题。 html 如下所示:

<ul class="feedEkList">
    <li class="slick-slide">
        <div class="featured-title">
            <div class="post-title">
                <a href="some url" target="_blank">some text</a>
            </div>
            <div class="post-excerpt">
                <img src="imageurl.jpg" class="wp-post-image">
                <p>Post Description.</p>
            </div>
        </div>
    </li>
</ul>

我的 ul 中有 10 li 项，但出于可读性目的，我只包含了一项，以便您可以看到我的 html 结构。

我的 JavaScript 似乎在每个特色标题 div 之前添加了所有图像，给了我一堆图片，而不是与该 li 相关的图片。

$(function() {
    $('.wp-post-image').insertBefore($('.featured-title'));

});

然后我尝试使用每个，但它似乎没有做任何事情。

$(function() {
$('.feedEkList > li > .featured-title > .post-excerpt > .wp-post-image').each(function() {
    $('.wp-post-image').insertBefore($('.featured-title'));
    });
});

我在想也许我需要在代码中的某个地方使用“this”，但我对 javascript 很陌生，不确定如何在之前的插入中正确使用“this”，或者“this”是否是最好的选择。

$('this.wp-post-image').insertBefore($('this.featured-title'));

谁能帮我找出我做错了什么？这让我发疯!

Answer 1

1. 您需要迭代每个图像
2. 对于每个图像，获取其父图像.slick-slide。
3. 使用 .prepend 将图像添加到 .slick-slide 前面
4. 可选:如果您需要 insertBefore .featured-title 请参阅评论。

$('.wp-post-image').each(function() {
  var $this = $(this),
      parentLi = $this.parents('.slick-slide').first();
  
  $this.prependTo(parentLi);
  //$this.insertBefore(parentLi.find('.featured-title'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="feedEkList">
  <li class="slick-slide">
    <div class="featured-title">
      <div class="post-title">
        <a href="some url" target="_blank">some text</a>
      </div>
      <div class="post-excerpt">
        <img src="/image/FgiPG.jpg" class="wp-post-image" />
        <p>Post Description.</p>
      </div>
    </div>
  </li>
  <li class="slick-slide">
    <div class="featured-title">
      <div class="post-title">
        <a href="some url" target="_blank">some text</a>
      </div>
      <div class="post-excerpt">
        <img src="/image/FgiPG.jpg" class="wp-post-image" />
        <p>Post Description.</p>
      </div>
    </div>
  </li>
  <li class="slick-slide">
    <div class="featured-title">
      <div class="post-title">
        <a href="some url" target="_blank">removed the "wp-post-image" class to show how it was look before</a>
      </div>
      <div class="post-excerpt">
        <img src="/image/FgiPG.jpg" />
        <p>Post Description.</p>
      </div>
    </div>
  </li>
</ul>