Javascript 通过ul li循环并使用insertBefore将图像向上移动两个元素

我正在学习js和jquery，并且一直在尝试解决这个小问题，当我尝试在页面上循环一个ul并在html中将dom元素（特别是图像）向上移动两个级别时。以下是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>

然后我试着用每一个，但它似乎没有任何作用

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

我在想，也许我需要在代码中的某个地方使用“this”，但我对javascript还不熟悉，不知道如何正确地将“this”与之前的insert一起使用，或者“this”是否是最好的选择

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

谁能帮我找出我做错了什么？它快把我逼疯了

您需要迭代每个图像

对于每个图像，获取其父级

.slick幻灯片

使用将图像预先粘贴到

.slick幻灯片中

可选：如果需要在

之前插入。特色标题

请参阅注释

$（'.wp post image'）。每个（函数（）{
变量$this=$（this），
parentLi=$this.parents（'.slick slide'）.first（）；
$this.prependTo（parentLi）；
//$this.insertBefore（parentLi.find（'.featured title'）；
});



职位描述



职位描述



职位描述



您需要迭代每个图像
对于每个图像，获取其父级
.slick幻灯片
使用将图像预先粘贴到
.slick幻灯片中
可选：如果需要在
之前插入。特色标题
请参阅注释

$（'.wp post image'）。每个（函数（）{
变量$this=$（this），
parentLi=$this.parents（'.slick slide'）.first（）；
$this.prependTo（parentLi）；
//$this.insertBefore（parentLi.find（'.featured title'）；
});



职位描述



职位描述



职位描述


你好！非常感谢您的帮助，让我们了解了这一点。不过，我有一个后续行动。我接受了你的代码，如果我在控制台中运行这段代码，我会得到完美的结果。如果我在页面上使用它，或者作为一个附加的.js使用，我似乎无法让它工作。以下是我迄今为止所做的工作。我添加了一个documentready，认为在脚本运行时DOM可能还没有准备好。不幸的是，除非它在控制台中，否则它仍然不会运行。jQuery（document）.ready（函数（$）{这里有代码}）；我的荣幸；）<代码>以下是我到目前为止所做的工作
。哪里？对不起，我想那不是很清楚。jQuery（document）.ready（函数（$）{（'.wp post image'）.each（函数（）{var$this=$（this），parentLi=$this.parents（'.slick slide'）.first（）；$this.insertBefore（parentLi.find（'.featured title'））；}）；你能为此创建一个新的应用程序吗？因为我看不出有什么不对劲。
控制台中的任何错误
？大多数情况下，代码确实有效，在粘贴箱中也有效。我相信问题可能出在shopify上，因为这就是我使用代码的地方。我不知道它们是如何工作的，但在一天的过程中，它突然在商店预览中起作用。也许他们有缓存的东西或者他们从不同的服务器上交付的东西……不太确定，但重要的是它确实有效！万分感谢！嗨，莫斯！非常感谢您的帮助，让我们了解了这一点。不过，我有一个后续行动。我接受了你的代码，如果我在控制台中运行这段代码，我会得到完美的结果。如果我在页面上使用它，或者作为一个附加的.js使用，我似乎无法让它工作。以下是我迄今为止所做的工作。我添加了一个documentready，认为在脚本运行时DOM可能还没有准备好。不幸的是，除非它在控制台中，否则它仍然不会运行。jQuery（document）.ready（函数（$）{这里有代码}）；我的荣幸；）<代码>以下是我到目前为止所做的工作

。哪里？对不起，我想那不是很清楚。jQuery（document）.ready（函数（$）{（'.wp post image'）.each（函数（）{var$this=$（this），parentLi=$this.parents（'.slick slide'）.first（）；$this.insertBefore（parentLi.find（'.featured title'））；}）；你能为此创建一个新的应用程序吗？因为我看不出有什么不对劲。

控制台中的任何错误

？大多数情况下，代码确实有效，在粘贴箱中也有效。我相信问题可能出在shopify上，因为这就是我使用代码的地方。我不知道它们是如何工作的，但在一天的过程中，它突然在商店预览中起作用。也许他们有缓存的东西或者他们从不同的服务器上交付的东西……不太确定，但重要的是它确实有效！万分感谢！

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