如何获取不是兄弟姐妹的特定类的上一个和下一个元素

Posted 2023-02-25

【中文标题】如何获取不是兄弟姐妹的特定类的上一个和下一个元素

【英文标题】：How to get the prev and next elements of a particular class which are not siblings

【发布时间】：2014-09-25 06:43:55

【问题描述】：

这是我的代码：

<ul>
    <li class="active">
        <div class="course_video_heading"><span class="minus"></span> Introduction <div class="course_duration" align="right">1m 21s</div></div>
        <ul>
            <li class="course_video viewed">
                Welcome <div class="course_duration" align="right">1m 21s</div>
            </li>
            <li class="course_video viewed">
                I need to select this <div class="course_duration" align="right">1m 21s</div>
            </li>
        </ul>
    </li>
    <li>
        <div class="course_video_heading"><span class="plus"></span> Warm up <div class="course_duration" align="right">1h 15m</div></div>
        <ul>
            <li class="course_video viewed current">
                Roll down <div class="course_duration" align="right">57s</div>
            </li>
            <li class="course_video">
                Roll down with demi pointe variation <div class="course_duration" align="right">57s</div>
            </li>
            <li class="course_video" data-file="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" data-image="http://content.bitsontherun.com/thumbs/nPripu9l-480.jpg">
                Side roll down <div class="course_duration" align="right">57s</div>
            </li>
            <li class="course_video">
                Side roll down variation with contraction <div class="course_duration" align="right">57s</div>
            </li>
            <li class="course_video">
                Class exercise <div class="course_duration" align="right">57s</div>
            </li>
        </ul>
    </li>
    <li>
        <div class="course_video_heading"><span class="plus"></span> Brushes <div class="course_duration" align="right">1h 5m</div></div>
        <ul>
            <li class="course_video">
                Welcome <div class="course_duration" align="right">1m 21s</div>
            </li>
        </ul>
    </li>
</ul>

我的要求：有一个元素<li class="course_video viewed current">，我需要之前的li，它有course_video 类。在这种情况下，它将是：

<li class="course_video viewed">
    I need to select this <div class="course_duration" align="right">1m 21s</div>
</li>

我尝试了什么：

$(".current").prev(".course_video")

这不起作用，因为它在不同的li

注意：这不是以下问题的重复:)

jQuery to find nearest Div of Parent

Getting next closest select element with jquery

jquery find closest previous sibling with class

【问题讨论】：

您可以尝试通过“course_video”类获取所有元素，然后在其中找到“current”类的元素，如jsfiddle.net/0k541m6w

【参考方案1】：

试试这个：读取current li 的索引，如果是0，则找到其父li 的前一个li，然后找到course_video。如果索引不是0，则使用prev()查找上一个li

var index = $(".current").index();
if(index==0)

    var previousLi = $(".current").closest('li').prev('li').find("li.course_video:last");

else

  var previousLi = $(".current").prev(".course_video");

【讨论】：

这看起来不错让我试试这个，但我期待一个没有任何条件的解决方案

【参考方案2】：

var vindex;
$().ready(function () 
    $("li .course_video").each(function (index) 
        if ($(this).hasClass('current')) 
            vindex = index;
        
    );
    $("li .course_video").each(function (index) 
        if (index == vindex - 1) 
           alert($(this)[0].outerhtml);
        
    );
);

此代码将帮助您。

【参考方案3】：

$('.current').parents('li').prev().find('li:last')

Here's the jsFiddle

【参考方案4】：

您可以使用检查项目索引的函数轻松完成此操作：如果索引为 0，那么您将选择前一个 ul 中的最后一个 li。

Element.prototype.previousLi = function() 
    var i = $(this).index(),
        n = this.parentElement.previousSibling.children.length;

    if (i) return this.parentElement.children[i-1];
    else return this.parentElement.previousSibling.children[n-1];

那么你可以这样做：

var el = $(".course_video.viewed.current")[0];
var previous = el.previousLi();

【参考方案5】：

试试这个代码，它会给你想要的结果：

   <script>
    var currentLI = $("li.current");

    prevLi=$(currentLI).parent('ul').parent('li').prev('li').find('li.viewed:last');

    alert($(prevLi).html());
    </script>