jQuery: Retrieving the next links hash value in list

Question

Hello, I'm trying to retrieve the hash value of the next link

HTML

<ul id="links">
    <li><a href="index.php?#1"></a></li>
    <li><a href="index.php?#2"></a></li>
    <li><a href="index.php?#3"></a></li>
</ul>

JS

$('#links li a').click(function() {

    var current_link = $(this).attr("href").substring(1);
    var next_link = $(this).next().attr("href").substring(1);

});

The current_link works, but I can't seem to retrieve the value of the link below. I think i'm missing an index() somewhere but i'm not exactly sure.

Thank you!

Answer 1

$('#links li a').click(function(e) {
    e.preventDefault()
    var current_link = this.hash.slice(1);
    var next_link = '';
    if ($(this).parent().next().length > 0)
       next_link = $(this).parent().next().find('a')[0].hash.slice(1);

    alert('this: ' + current_link + ' next: ' + next_link);
    //return false;

});​

crazy demo

Answer 2

You can use jQuery's .next() function to get the next sibling, for example, the next sibling of #1 would be #2.

Docs

http://api.jquery.com/next/

Example

http://jsfiddle.net/U7G6h/

Answer 3

Try this:

var next_link = $(this).parent().next().children('a').first().attr("href").substring(1);