Question

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

Answer 1

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