CODEWITHSUNDEEP
jquerydom
Luke
Luke

Reputation: 340

DOM jQuery finding next and previous element to current

How to find next and previous "A" element from "#current" using jQuery. HTML:

<ul>
    <li>
        <a></a>
        <a></a>
        <a></a>
    </li>
    <li>
        <a></a>
        <a></a>
        <a id='current'></a>
    </li>
    <li>
        <a></a>
        <a></a>
        <a></a>
    </li>
</ul>

i've tried to create a code with something like this:

var curr = $('#current');
var prev = curr.parent().prev('a');
var next = curr.parent().next('a');

But it didn't work. I think it's a very easy questions, but i'm stuck right now. Any ideas?

UPD: It should travel to next "LI" element to find "A" if it's the last "A" element in current "LI".

Upvotes: 2

Views: 6286

Answers (3)

Adil
Adil

Reputation: 148160

You do not need to use parent to get prev and next

Live Demo

var curr = $('#current');
var prev = curr.prev('a');
var next = curr.next('a');

To make this cross row you need to check if you have current element first or last of row. If current element is first then last would be last element for previous row and similarly if current element is last of row then next will be first of next row.

Live Demo

$('a').click(function () {
    $('ul > li > a').css('background-color', 'white');
    var curr = $(this);
    curr.css('background-color', 'green');;
    var prev = curr.prev('a')
    if(prev.length == 0 )
    {
        lastaOfPrevLi = curr.parent().prev();
        if( lastaOfPrevLi.length != 0)
            lastaOfPrevLi.find('a:last').css('background-color', 'red');
    }
    else
        prev.css('background-color', 'red');
    var next = curr.next('a');
    if(next.length == 0 )
    {
        lastaOfNextLi = curr.parent().next();
        if( lastaOfNextLi.length != 0)
            lastaOfNextLi.find('a:first').css('background-color', 'orange');
    }
    else
            next.css('background-color', 'orange');
});

Upvotes: 5

Aaron
Aaron

Reputation: 14039

From the jQuery docs and my own quick experiment, it does not look like next or previous will get elements outside the parent. Those methods are supposed to get the immediate sibling of the current element regardless of type, unless a selector is used. Elements under a different parent wouldn't be counted as siblings, they're more like cousins.

What you could do to accomplish your goal would look more like the following

var current = $("#current");
var prev = current.prev();
var next = current.next().length > 0 ? current.next() : current.parent().next().first()

You could do the same with prev using prev().last() instead of next().first() should current be the first child of its parent element.

You can try it out in this jsfiddle.

Upvotes: 0

charlietfl
charlietfl

Reputation: 171690

If you want to look beyond the LI of #current will need a different approach since nex() and prev() only look for imediate siblings

var curr = $('#current');
/* check if there is previous sibling, otherwise get last "a" in previous "LI"*/
var prev = curr.prev().length ? curr.prev() : curr.parent().prev().find('a:last');
var next = curr.next().length ? curr.next() : curr.parent().prev().find('a:first');

Upvotes: 1

Related Questions