I am a photographer and have a website where I am unable to edit the 'template' structure but can upload javascript/css etc.

I want to bind next/prev navigation to keyboard right/left.

The structure of the links are:

<div class="image_navigation">
      <h4>Image Navigation</h4>
      <ul>
        <li class="index"><a href="LINKURL">Index</a></li>
        <li class="previous"><a href="LINKURL">Previous</a></li>
        <li class="next"><a href="LINKURL">Next</a></li>
      </ul>
    </div>

I referred to this and managed to create this.

$(function() {$(document).keyup(function(e) {
switch(e.keyCode) { case 37 : window.location = $('li.prev').attr('href'); break;
    case 39 : window.location = $('li.next').attr('href'); break; }});});

This is where I am stuck. It does not work because it assumes the I am refereing to a href tag but am refering to the li that contains it.

Any ideas would be much appreciated!

I am a photographer and have a website where I am unable to edit the 'template' structure but can upload javascript/css etc.

I want to bind next/prev navigation to keyboard right/left.

The structure of the links are:

<div class="image_navigation">
      <h4>Image Navigation</h4>
      <ul>
        <li class="index"><a href="LINKURL">Index</a></li>
        <li class="previous"><a href="LINKURL">Previous</a></li>
        <li class="next"><a href="LINKURL">Next</a></li>
      </ul>
    </div>

I referred to this and managed to create this.

$(function() {$(document).keyup(function(e) {
switch(e.keyCode) { case 37 : window.location = $('li.prev').attr('href'); break;
    case 39 : window.location = $('li.next').attr('href'); break; }});});

This is where I am stuck. It does not work because it assumes the I am refereing to a href tag but am refering to the li that contains it.

Any ideas would be much appreciated!

• javascript
• jquery
• keyboard
• navigation
• bind

• You should set the window.location.href property and not the entire window.location object. – Stefan Commented Jan 18, 2012 at 12:39

4 Answers 4

window.location = $('li.next a').attr('href');

I found this question when looking for dupes on this question and decided to share the little bit of jQuery I wrote to answer that one modified for your selectors:

// when the document is ready, run this function
jQuery(function( $ ) {
    var keymap = {};

    // LEFT
    keymap[ 37 ] = "li.prev a";
    // RIGHT
    keymap[ 39 ] = "li.next a";

    $( document ).on( "keyup", function(event) {
        var href,
            selector = keymap[ event.which ];
        // if the key pressed was in our map, check for the href
        if ( selector ) {
            href = $( selector ).attr( "href" );
            if ( href ) {
                // navigate where the link points
                window.location = href;
            }
        }
    });
});

$(function() {$(document).keyup(function(e) {
switch(e.keyCode) { case 37 : window.location = $('li.prev a').attr('href'); break;
case 39 : window.location = $('li.next a').attr('href'); break; }});});

$('li.next') targets all list items with the class of 'next', and that's it - it's unaware of the content of the list item.

If you want the href of the a tag, you need to go a bit deeper ($('li.next a') or $(li.next').find('a')) - your original code was looking for the href attribute of the list item itself (which of course doesn't exist, as list items don't have href attributes).

You need to target the < a > within the < li >. I see that you are using jquery[and assume that you have included the necessary jquery file in the header].

http://api.jquery./child-selector/ is a good place to learn about jquery selectors.

Assuming that everything else in your code is correct you can achieve what I think you are looking for with

$(function() {
    $(document).keyup(function(e) {
        switch(e.keyCode) {
            case 37 : window.location = $('li.previous a').attr('href');
                break;
            case 39 : window.location = $('li.next a').attr('href');
                break; 
        }
    });
});