Select anchor marks by pressing the up and down arrows

Question

I want to select anchor tags when I click the up and down arrows.

here is my code

 var keyindex,alinks;
    keyindex = -1;
    $('#ajax_response').keydown(function(e)
        {
            alinks = $('#ajax_response').find('a');
            if(e.keyCode == 40)
            {
                e.preventDefault();     
                if(keyindex == -1)
                {
                keyindex = 1;
                }
                if(alinks.length > 0 && keyindex < alinks.length)
                {
                $('#ajax_response').find('a')[keyindex++].focus();
                }
            }
            if(e.keyCode == 38)
            {
                e.preventDefault();
                if(keyindex == alinks.length)
                {
                keyindex = keyindex-2;
                }

                if(alinks.length > 0 && keyindex < alinks.length && keyindex >=0)
                {
                $('#ajax_response').find('a')[keyindex--].focus();
                }
            }
        });

But sometimes it does not work properly. Anyone can find a problem in this code, please let me know.

Please check this link http://jsfiddle.net/rz550dwa/

Answer 1

You can make it more dynamic and efficient with

• Caching a jQuery object containing links, so you don’t have to look for them every time.
• Using filter()c :focusto dynamically find the currently focused element, instead of tracking it yourself.

, , / .

, else. .

$(document).ready(function(){
    var alinks = $('#ajax_response').find('a');
    if(alinks.length > 0) {
        alinks.first().focus();
        $('#ajax_response').keydown(function(e)
        {
            // get the index of the current focussed a 
            var keyIndex = alinks.index(alinks.filter(':focus'));
            if(e.keyCode == 40)
            {
                e.preventDefault();
                // find the next index to highlight
                if(keyIndex < 0) {
                    keyIndex = 0;
                } else if(keyIndex < alinks.length - 1) {
                    keyIndex++;
                } else {
                    keyIndex = 0; // for cyclic behaviour
                }
                alinks.eq(keyIndex).focus();
            }
            else if(e.keyCode == 38)
            {
                e.preventDefault();
                // find the previous index to highlight
                if(keyIndex > alinks.length -1) {
                    keyIndex = alinks.length -1;
                } else if(keyIndex > 0) {
                    keyIndex--;
                } else {
                    keyIndex = alinks.length -1; // for cyclic behaviour
                }
                alinks.eq(keyIndex).focus();
            }
        });
    }
});

Fiddle

Answer 2

:

anchor.

:

$('#ajax_response a').focus();

$('#ajax_response a:eq(0)').focus();

Update

. :

$(document).ready(function () {
    $('#ajax_response a:eq(0)').focus();
    var keyindex, alinks;
    keyindex = -1;
    // Key Events
    $('#ajax_response').keydown(function (e) {
        alinks = $('#ajax_response').find('a');
        if (e.keyCode == 40) {
            e.preventDefault();
            if (keyindex == -1) {
                keyindex = 1;
            }
            if (alinks.length > 0 && keyindex < alinks.length) {
                $('#ajax_response').find('a')[keyindex++].focus();
            }
        }
        if (e.keyCode == 38) {
            e.preventDefault();
            if (keyindex == alinks.length) {
                keyindex = keyindex - 2;
            }

            if (alinks.length > 0 && keyindex < alinks.length && keyindex >= 0) {
                $('#ajax_response').find('a')[keyindex--].focus();
            }
        }
    });
    $('#ajax_response a').on("click", function (e) {
        var index = $(this).parent().index();
        keyindex = index+1;
        console.log(index);
    })
});

Answer 3

http://jsfiddle.net/rz550dwa/5/

!

$(document).ready(function(){
    var IndexNumber=1;
    function focusAnchor(index){
    $('#ajax_response').find('a')[index].focus();
    };
    $('#ajax_response a').focus();
    // Key Events
    $('#ajax_response').keydown(function(e)
    {
        alinks = $('#ajax_response').find('a');
        if(e.keyCode == 40)
        {
            e.preventDefault(); 
            if(IndexNumber<(alinks.length-1)){
            IndexNumber++;
                focusAnchor(IndexNumber);
            }
            else{
                IndexNumber=0;
                focusAnchor(IndexNumber);
            }
        }
        if(e.keyCode == 38)
        {
            e.preventDefault();
            if(IndexNumber>0){
            IndexNumber--;
                focusAnchor(IndexNumber);
            }
            else{
                IndexNumber=alinks.length-1;
                focusAnchor(IndexNumber);
            }
        }
    });
});