How to get the prev and next elements of a particular class which are not siblings

Question

Here is my code :

<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>

My requirement : There is a element, <li class="course_video viewed current">, I need the previous li which has course_video class. In this case it would be :

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

What have I tried :

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

This is not working as it is in different li

Note : It is not the duplicate of following questions :)

jQuery to find nearest Div of Parent

Getting next closest select element with jquery

jquery find closest previous sibling with class

You can try to get all elements by class "course_video", then find among them elements with class "current", like here http://jsfiddle.net/0k541m6w/ — Dart, Sep 25 '14 at 07:10

score 1 · Answer 1 · answered Sep 25 '14 at 06:48

1

Try this : read the index of current li and if it is 0 then find the previous li of its parent li and then find the course_video. And if index is not 0, then find previous li using 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");
}

answered Sep 25 '14 at 06:48

Bhushan Kawadkar

28,279
5
35
57

This looks fine let me try this, But I am expecting a solution with out any conditions – Prasanth Bendra Sep 25 '14 at 06:51

score 1 · Answer 2 · answered Sep 25 '14 at 07:16

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

this code will help you.

Ohgodwhy · Answer 3 · 2014-09-25T06:50:32.470

0

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

Here's the jsFiddle

edited Sep 25 '14 at 06:50

answered Sep 25 '14 at 06:48

Ohgodwhy

49,779
11
80
110

score 0 · Answer 4 · answered Sep 25 '14 at 06:55

You can do it easily with a function that checks the index of the item: if the index is 0 then you'll select the last li in the previous 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];
}

Then you can do:

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

score 0 · Answer 5 · answered Sep 25 '14 at 07:30

0

Try this code , it will give you the desired result :

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

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

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

answered Sep 25 '14 at 07:30

Sharry India

341
1
9

How to get the prev and next elements of a particular class which are not siblings

5 Answers5