CODEWITHSUNDEEP
javascriptjqueryhtmldom
Prasanth Bendra
Prasanth Bendra

Reputation: 32750

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

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

Upvotes: 0

Views: 228

Answers (5)

Sharry India
Sharry India

Reputation: 351

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>

Upvotes: 0

Praloy Das
Praloy Das

Reputation: 325

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.

Upvotes: 1

Marco Bonelli
Marco Bonelli

Reputation: 69346

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

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50787

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

Here's the jsFiddle

Upvotes: 0

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

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

Upvotes: 1

Related Questions