Question

这是我的代码：

<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

Answer 1

试试这个：阅读current li的索引，如果是0，则找到其父li的上一个li，然后找到course_video }。如果索引不是0，则使用li

查找之前的prev()

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");
}

Answer 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);
        }
    });
});

此代码可以帮助您。

Answer 3

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

Here's the jsFiddle

Answer 4

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

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();

Answer 5

尝试使用此代码，它会为您提供所需的结果：

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

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

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

如何获得不是兄弟姐妹的特定类的prev和next元素

5 个答案: