Javascript 具有相同类的jQuery交换列表

我创建了一个有点复杂的列表，我希望在单击类为“.recipes”的元素后，在段落内显示它，但在单击按钮prev或next后，我希望切换到具有相同类名的上一个或下一个元素。我已经知道如果他们相邻，如何切换列表，但将他们放在不同的父母中后，似乎更复杂：

<div>
    <button class="prev">prev</button>
    <button class="next">next</button>
    <p class="showRecipies"></p>
    <ul class="listOfRecipies">
        <li>
            <ul class="particularRecipie">
                <li class="timeOfPreparation">3:20</li>
                <li class="recipies">Drinks</li>
            </ul>
        </li>
        <li>
            <ul class="particularRecipie">
                <li class="timeOfPreparation">3:20</li>
                <li class="recipies">Vegetables</li>
            </ul>
        </li>
        <li>
            <ul class="particularRecipie">
                <li class="timeOfPreparation">3:20</li>
                <li class="recipies">Meat</li>
            </ul>
        </li>
        <li>
            <ul class="particularRecipie">
                <li class="timeOfPreparation">3:20</li>
                <li class="recipies">Fruits</li>
            </ul>
        </li>
        <li>
            <ul class="particularRecipie">
                <li class="timeOfPreparation">3:20</li>
                <li class="recipies">Others</li>
            </ul>
        </li>
    </ul>
</div>

为了展示我在这个论坛上从另一个人那里得到的类“recipes”的上一个元素，这里是。但是，因为类现在有不同的父类，所以它不起作用，我想我可以添加更多的父类（），并因此找到上一个或下一个“.recipes”，但它没有起作用：

$(".prev").click(function() {
    var isFirst = $(".recipies.active").is(":first-child");
    if(isFirst){
        $(this).parent().find(".recipies:last").trigger("click");
    } else {
        $(".recipies.active").prev().trigger("click");
    }
});

看看这个：

$（“.recipies”）。在（“单击”，函数（）{
$（“.recipies.active”）.add（$（this））.toggleClass（“active”）；
var recipieValue=$（this.text（）；
var showRecipies=document.querySelector（“.showRecipies”）；
showRecipies.innerHTML=recipieValue；
});
$（“.prev”）。单击（函数（）{
var isFirst=$（“.recipies.active”）.text（）=$（$（“.recipies”）.get（0））.text（）；
如果（isFirst）{
$（this.parent（）.find（“.recipies:last”）.trigger（“单击”）；
}否则{
$（“.recipies.active”）.parent（）.parent（）.prev（）.find（“.recipies”）.trigger（“单击”）；
}
});

上
下一个




3:20
饮料




3:20
蔬菜




3:20
肉




3:20
水果




3:20
其他



$（“.recipies.active”）.prev（）
将在同一ul中找到上一个li，即准备时间。试试
$（“.recipies.active”）.parent（）.parent（）.prev（）.find（“.recipies”）
Dude你是最棒的：）非常感谢你，它很管用@MajidAkbari，把它作为一个答案发布，这样它就可以被接受和投票。
$(".prev").click(function() {
    var isFirst = $(".recipies.active").is(":first-child");
    if(isFirst){
        $(this).parent().find(".recipies:last").trigger("click");
    } else {
        $(".recipies.active").prev().trigger("click");
    }
});